Zenn
💡

cssのword-breakとoverflow-wrapのどっち使うか迷ったので整理した

2021/07/21に公開
CSS
tech

はじめに

CSSで折り返しの動作を指定する際に、word-breakとoverflow-wrapのどっち使うか迷ったので整理しました。

やってみたこと

折り返しの動作に関する仕様の整理

折り返しの動作に関連するCSSプロパティは次の通りです。

  • word-break
  • overflow-wrap

word-breakとは

コンテンツボックスからテキストが溢れる場合に、領域ベースで改行するかどうかを設定するプロパティです。
以下の設定値があります

  • normal：既定の設定を適用
  • break-all：改行する
  • keep-all：条件付きで改行する。単語の途中では区切らない

例えば、keep-allを指定すると、以下のような感じで「パン」の途中で区切られません。

ただし、「日本語・中国語・韓国語」と「英語等」では動作が違うので要注意です。この記事では説明を割愛します。

overflow-wrap（旧：word-wrap）とは

コンテンツボックスからテキストが溢れる場合に、単語ベースで改行するかどうかを設定するプロパティです。
以下の設定値があります（anywareは除きます）

  • normal：既定の設定を適用（単語間の空白などで改行）
  • break-word：適切な折返し位置がなければ、単語の途中で改行

所感

経験上、基本的にはword-breakで設定し、それだけで対応できない場合にoverflow-wrapを使うことでほとんどのケースに対応できています。個人的にはその方針で使い分けるのをおすすめします。

まとめ

  • word-breakかoverflow-wrapか両方を使って、適切な折返し位置を設定できる。
  • それぞれのプロパティで、改行を生成する基準が違う
  • 個人的には、まずword-breakで設定し、それだけで対応できない場合にoverflow-wrapを使うのがオススメ

参考

word-breakについて

overflow-wrapについて

Discussion