【CSS】文字が枠から「はみでる」ときの対処法

メールアドレスやURL表示する時に、word-wrapが効かずうまく改行されず枠からはみ出て表示されてしまうことがあります。

word-wrap

レスポンシブサイトでスマホサイズにした時に文字がはみ出したり、テーブルの枠に収まりきらずレイアウトが崩れたりしたときの対処法を紹介します。

word-break : break-allを指定する

word-wrapが効かないときはCSSでword-break : break-all;を指定してみるとうまくいく場合があります。

css
p{
    word-break:break-all;
}

break-allはどんな場合でも強制的に改行します。

どうしても改行が必要な場合はword-break : break-all;を使いましょう。