CSSにはいろんなプロパティがありますが、テキストにおける禁則処理などの振る舞いもCSSで制御することができます。ただ、よくわかりにくいイメージがあり、今回改めてどのような設定があるのかをまとめてみたいと思います。ここでは「word-break」「overflow-wrap」「white-space」の3つのプロパティを見ていきます。  

【word-break】テキスト文章内における改行位置を調整する

word-breakはテキストの禁則処理についてのプロパティです。テキストの折り返しを制御します。禁則処理が強い順から「keep-all」「normal」「break-word」「break-all」になります。

normal	英語は単語の切れ目で改行、日本語は表示領域の端に合わせて改行される初期値。
break-all	禁則処理が解除された状態で、全てのテキストが単語に関係なく表示領域の端に合わせて改行。
keep-all	英語、日本語全て単語の切れ目で改行。
break-word	表示領域の幅に影響する場合には、単語の中でも改行される。

   

【overflow-wrap】単語内での改行の可否を決める

overflow-wrapは単語内でのテキスト折り返しの可否を指定できます。旧プロパティでは「word-wrap」となり、レガシーブラウザ用の互換用として残されている。目的としては同じです。表示領域内に収まるよう文章を配置した場合には「break-word」を指定するのがセオリーです。

normal	表示領域を超えても単語の途中では改行させない。
break-word	表示領域の幅に影響する場合には、単語の中でも改行される。
anywhere	break-wordと同じく単語の中でも改行されるが、コンテンツ幅に単語内の分割によって折り返されたサイズが考慮される。

   

【white-space】スペースや改行の表示方法を指定

空白文字（スペースやタブ）や改行（改行文字や改行タグ）に対して要素内でどのように表示させるかを指定します。ウェブアプリでテキストを投稿し、HTMLソースとして表示させる時などに使われることが多いのではないでしょうか。

normal	連続する改行や空白文字は、1つの改行もしくは空白文字として扱い表示され、表示領域に合わせてテキストを折り返す。
nowrap	連続する改行や空白文字は、1つの改行もしくは空白文字として表示され、テキストの折り返しをしない。
pre	連続する改行や空白文字は、そのまま表示され、テキストの折り返しをしない。
pre-wrap	連続する改行や空白文字は、そのまま表示され、表示領域に合わせてテキストの折り返す。
pre-line	連続する改行は、そのまま表示され、連続する空白文字は1つの空白文字として扱い、表示領域に合わせてテキストを折り返す。

    これらのプロパティはあまり目立たず、よくわからず使ってしまいがちですが、テキストが含まれるレイアウトや、HTMLデータを取得して表示させる場合などには理解しておく必要があるので、ぜひ覚えておきたいですね。今回のサンプルはこちらに用意しましたのでイメージしやすいのではないでしょうか。   （参考にさせて頂いたサイト） word-break - CSS: カスケーディングスタイルシート | MDN overflow-wrap - CSS: カスケーディングスタイルシート | MDN white-space - CSS: カスケーディングスタイルシート | MDN