CSSによる文字の折り返し制限・改行の禁則処理の指定方法まとめ

中途半端な位置で改行してほしくない！ という場合の対処法。

ポイントとなるCSSは以下の２つ。

• word-break: keep-all;
• line-break: strict;

word-breakプロパティについて

normal
英語等は単語の途中では改行せず、単語の切れ目で改行されます。日本語・中国語・韓国語等は表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。

break-all
言語に関係なく表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。

keep-all
言語に関係なく単語の途中では改行せず、単語の切れ目で改行されます。

line-breakについて

normal
標準の禁則処理をします。

strict
厳密な禁則処理をします。

※ strictを指定すると、日本語の「ー」や「っ」でもちゃんと単語の一部として認識されます

また、これだけの指定だと「文字数の長い単語」があった場合にコンテンツ幅からはみ出してしまうので、以下のCSSと併用させて使用しましょう。

• word-wrap: break-word;
• overflow-wrap: break-word;

これらは基本的にresetスタイルでbodyなどにあらかじめセットされていることが多いかと思いますが、覚えておきましょう。

まとめ

.elem{
  word-break: keep-all;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
}