英単語やアルファベットなどで、テキストが改行されない
まれにテキストが改行されないことがありませんか？
おそらく改行されないのは英単語やURL、メールアドレスなどのはずです。
日本語は改行されているでしょう。
なぜなら英単語や英文は、
空白や半角スペースなどがないと改行されないからです。
ブラウザが改行位置を認識できないんですね。
とはいえ、はみ出しているテキストは改行させないと見栄えが悪いです。
もしクライアントさんからお仕事を受けていたとしたら、
「改行させてください」とお願いされることでしょう。
ということで、表示範囲からはみ出すくらい長い英文（英単語）を自動で改行させるための方法を見ていきましょう。
【基本コード】改行されないテキストをCSSで改行させる
div{
/* widthやmax-widthで表示範囲の横幅を指定する */
width: 300px;
max-width: 300px;
/* その上で、下記を指定する。word-breakと併せて指定しましょう */
overflow-wrap: break-word;
/* その上で、下記のいずれかを指定する。overflow-wrapと併せて指定しましょう */
word-break: break-word;
word-break: break-all;
}【Demo】改行されないテキストをCSSで改行させる
See the Pen テキストの折り返し by さおさん (@saio-th) on CodePen.
【Point】改行されないテキストをCSSで改行させる
表示範囲の横幅を指定する
- 横幅を指定することで表示範囲いっぱいにテキストが広がって改行してくれます。
- 横幅を指定することで改行場所を明示することができます。
横幅を指定したうえで、overflow-wrapとword-breakの両方を指定する
overflow-wrapとword-breakは異なるプロパティなので、
併せて指定しても問題ございません。
なので両方指定しておくのが無難です！
【解説】改行されないテキストをCSSで改行させる
overflow-wrapとword-breakの役割
overflow-wrapとword-breakプロパティは、
それぞれ単語の途中で改行するかしないかの指定ができます。
overflow-wrapとword-breakの違い
二つのプロパティの違いについては、こちらの記事が非常にわかりやすかったです。
ありがとうございます！
（※参考：改行を自動で！CSSで文字列を折り返しする方法【初心者向け】現役Webデザイナーが解説）
・overflow-wrap（文章が領域の端に来た時に、単語の途中で改行するかどうかの設定）
・word-break（長い単語が領域の端に来た時に、単語の途中で改行するかどうかの設定）
overflow-wrapは「表示範囲に対して単語を折り返すか判断する」word-breakは「単語の長さに対して表示範囲が短い場合に、単語を折り返すか判断する」
ということですね。
表示範囲に横幅を指定しなければならない
overflow-wrap、word-bredが効かないケースがあります。
どういったケースで効かないかというと、
要素の横幅がコンテンツの幅で決定されるような場合です。
例えばテーブル要素。
table-layout: fixed;が指定されていない- セルの横幅が指定されていない
このケースでは、セルの横幅は中身によってなりゆきで決定されてしまいます。
上記のいずれか、もしくは両方に当てはまると、テキストが自動で改行されないので要注意です。
ほかの例でいうとposition: absolute;を指定している要素。
こちらも横幅を指定しなければ、コンテンツの幅に左右されるので、
自動改行されません。
自動改行を活かすには表示範囲の横幅を指定しましょう！
【まとめ】改行されないテキストをCSSで改行させる
- 長い英単語やURLが入る可能性がある要素には横幅を指定する
overflow-wrapとword-breakは併用して指定する
これで、ほとんどの場合において改行で困らないはずです！
改行されない時はoverflow-wrapやword-breakの指定に目が行きがちですが、
どちらかというと「横幅を指定していない」ことを見落としやすいです。
どちらの視点からも忘れずにチェックするようにしましょう！
以上です。
少しでもお役に立てたら嬉しいです。
Comments