Webページ上に文章を掲載する際、末尾の一文字だけ改行してしまったり、改行位置のバランスに困ることがよくあります。
レスポンシブの場合だと、PC表示では違和感のない改行位置だったとしても、SP表示で表示幅が変わることでテキストのバランスがおかしくなるようなこともしばしばありますが、そんな文章の改行位置を調整できるCSSの「text-wrap」と「word-break」と「overflow-wrap」の3つのプロパティでどのように改行位置が変化するかサンプルをもとに紹介してみます。
text-wrap
まずはCSSの「text-wrap」プロパティから。
text-wrap – CSS: カスケーディングスタイルシート | MDN
「text-wrap」の値には以下のようなものがあります。
| wrap ※規定値 | テキストは要素幅に合わせて改行 |
|---|---|
| nowrap | テキストを改行させない |
| balance | 各行の文字数を均等にするようにテキストを改行 |
| pretty | 一文字（一単語）だけ改行しないように調整 |
| stable | wrapと同じ動作 |
「text-wrap」の値は様々ありますが、文章の最後の一文字だけ改行してしまうことを避けるような場合は、「balance」や「pretty」を使用すると解消できます。
それぞれの値での実際の改行位置の変化は以下のようになります。
See the Pen
CSS text-wrap: balance; by BLACKFLAG (@BlackFlag)
on CodePen.
「text-wrap」の対象ブラウザは以下です。
word-break
続いてCSSの「word-break」プロパティです。
word-break – CSS: カスケーディングスタイルシート | MDN
「word-break」の値には以下のようなものがあります。
| normal ※規定値 | 通常の改行 |
|---|---|
| break-all | 英単語などでも文字の途中で改行させる |
| keep-all | 日本語（中国語等も含む）は改行させないが、英文は改行させる |
| break-word ※非推奨 | 単語の区切りで改行させるが、単語の途中でも改行する |
| auto-phrase | ブラウザが適切な位置で改行させる |
「word-break」の値も様々ありますが、「text-wrap」のように文章中で一文字だけ改行することを制御するようなことは難しいので使い分けが必要です。
それぞれの値での改行位置の変化は以下になります。
See the Pen
CSS word-break by BLACKFLAG (@BlackFlag)
on CodePen.
「word-break」の対象ブラウザは以下です。
overflow-wrap
最後はCSSの「overflow-wrap」プロパティです。
overflow-wrap – CSS: カスケーディングスタイルシート | MDN
「overflow-wrap」の値には以下のようなものがあります。
| normal ※規定値 | 単語間で改行 |
|---|---|
| break-word | 英単語などでも文字の途中で改行させる |
| anywhere | 基本的に break-word と同じで英単語などでも文字の途中で改行させるが、コンテンツの最小サイズ計算時方法が異なる |
「overflow-wrap」の値も様々ありますが、基本的にはURLのような連続する英数字の改行位置の制御になるので、日本語での影響はほとんどありません。
それぞれの値での改行位置の変化は以下になります。
See the Pen
CSS overflow-wrap by BLACKFLAG (@BlackFlag)
on CodePen.
「overflow-wrap」の対象ブラウザは以下です。
「text-wrap」と「word-break」と「overflow-wrap」それぞれで改行位置の制御は様々ですが、文章の末尾一文字だけ改行してしまうことを避けるには「text-wrap」を使用するのが最適かと思います。
「text-wrap: balance;」はページのレイアウトによって見栄えが大きく変わってしまうので、「text-wrap: pretty;」を長い文章に対しては常に入れて、一文字だけ改行してしまうような微妙な見た目が発生しないようにしておくのもいい気がしています。
以上が「text-wrap」と「word-break」と「overflow-wrap」での改行位置の制御でした。
文章を掲載する際の、改行バランスを制御する際にぜひ。。。