text-wrap

要素内でのテキストの折り返し方を制御するユーティリティ。

クラススタイル

text-wrap

text-wrap: wrap;

text-nowrap

text-wrap: nowrap;

text-balance

text-wrap: balance;

text-pretty

text-wrap: pretty;

例

text-wrap ユーティリティを使用して、テキスト内の論理的なポイントで複数行に折り返すようにします。

人気マンハッタンスープ店が閉店

ニューヨーク市民は、コミュニティを困惑させている一連の出来事の後、市内で最も人気のあるスープ店が予期せず閉店したため、今年は例年より暖かくない冬に直面しています。

<article class="text-wrap">
  <h3>Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

text-nowrap ユーティリティを使用して、テキストが折り返されるのを防ぎ、必要に応じてオーバーフローできるようにします。

人気マンハッタンスープ店が閉店

<article class="text-nowrap">
  <h3>Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

text-balance ユーティリティを使用して、テキストを各行に均等に配置します。

人気マンハッタンスープ店が閉店

<article>
  <h3 class="text-balance">Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

パフォーマンス上の理由から、ブラウザはテキストのバランス調整を約 6 行以下のブロックに制限しており、見出しに最適です。

text-pretty ユーティリティを使用して、テキストブロックの末尾に孤立した単語 (1 行に 1 つの単語) が表示されないようにします。

人気マンハッタンスープ店が閉店

<article>
  <h3 class="text-pretty">Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

プレフィックスa text-wrap ユーティリティ md: のようなブレークポイントバリアントとともに使用して、ユーティリティを適用するのはmedium 画面サイズ以上

<h1 class="text-pretty md:text-balance ...">
  <!-- ... -->
</h1>

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