overflow-wrap

オーバーフロー要素内の単語の改行を制御するためのユーティリティ。

クラススタイル

wrap-break-word

overflow-wrap: break-word;

wrap-anywhere

overflow-wrap: anywhere;

wrap-normal

overflow-wrap: normal;

例

必要に応じて単語内の文字間で改行を許可するには、wrap-break-wordユーティリティを使用します。

主要な英語辞書の中で最も長い単語はニューモノウルトラマイクロスコピックシリコヴォルケーノコニオシスです。これは、火山の非常に細かいシリカ粒子を吸入することによって罹患する肺疾患を指す単語です。医学的には、シリコーシスと同じです。

<p class="wrap-break-word">The longest word in any of the major...</p>

wrap-anywhereユーティリティはwrap-break-wordと同様に動作しますが、ブラウザは要素の本来のサイズを計算する際に単語の途中の改行を考慮に入れます。

これは、通常は子要素にmin-width: 0を設定してコンテンツサイズよりも小さくする必要があるflexコンテナ内のテキストを折り返す場合に役立ちます。

スペース、ハイフン、句読点などの自然な折り返しポイントでのみ改行を許可するには、wrap-normalユーティリティを使用します。

<p class="wrap-normal">The longest word in any of the major...</p>

プレフィックスan overflow-wrapユーティリティ md:のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみです。

<p class="wrap-normal md:wrap-break-word ...">
  Lorem ipsum dolor sit amet...
</p>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。