2024年12月10日(火)

CSSの「text-wrap」と「word-break」での改行位置の制御

• 0
• 2
• 1
• 3

Webページ上に文章を掲載する際、末尾の一文字だけ改行してしまったり、改行位置のバランスに困ることがよくあります。

レスポンシブの場合だと、PC表示では違和感のない改行位置だったとしても、SP表示で表示幅が変わることでテキストのバランスがおかしくなるようなこともしばしばありますが、そんな文章の改行位置を調整できるCSSの「text-wrap」と「word-break」の2つのプロパティでどのように改行位置が変化するかサンプルをもとに紹介してみます。

text-wrap

まずはCSSの「text-wrap」プロパティから。

text-wrap – CSS: カスケーディングスタイルシート | MDN

「text-wrap」の値には以下のようなものがあります。

wrap  ※規定値 テキストは要素幅に合わせて改行 nowrap テキストを改行させない balance 各行の文字数を均等にするようにテキストを改行 pretty 一文字（一単語）だけ改行しないように調整 stable wrapと同じ動作

「text-wrap」の値は様々ありますが、文章の最後の一文字だけ改行してしまうことを避けるような場合は、「balance」や「pretty」を使用すると解消できます。