CSS で改行を制御する - overflow-wrap white-space
2021-01-18
CSS で文章の改行を制御するときは以下の2つを設定すると良い。
overflow-wrap: break-word;white-space: pre-line;
overflow-wrap: break-word
overflow-wrap はボックスからはみ出ないように改行を制御するもの。
overflow-wrap: break-word; は、英単語ごとに改行を考慮する。
英文の場合、単語の途中で改行されてしまうと読みづらくなってしまうので、ボックスに入り切らない場合は単語ごと改行される。ただし一単語がボックスエリアに入り切らない場合は単語の途中でも改行される。
参考ページ：overflow-wrap
white-space: pre-line
white-space はホワイトスペースを制御するもの。
HTML でホワイトスペースは以下の5文字を指す。
- タブ
- 改行
- ページ送り
- 復帰
- 空白
ホワイトスペースとして改行があるので、改行を扱うときは考慮する。
white-space: pre-line; は、連続するホワイトスペースは1つにして、改行文字で改行される。
参考ページ：white-space
参考ページ：Whitespace