1. タイポグラフィー
  2. word-break

タイポグラフィー

word-break

要素内のワードブレイクを制御するためのユーティリティ。

クラススタイル
break-normal
word-break: normal;
break-all
word-break: break-all;
break-keep
word-break: keep-all;

ノーマル

通常のワードブレイクポイントでのみ改行を追加するには、break-normalユーティリティを使用します。

主要な英語辞書の中で最も長い単語は pneumonoultramicroscopicsilicovolcanoconiosis です。これは、非常に細かいシリカ粒子、特に火山からのシリカ粒子の吸入によって引き起こされる肺疾患を指す言葉です。医学的には、シリコーシスと同じです。

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

Break All

単語全体を保持しようとせずに、必要に応じていつでも改行を追加するには、break-allユーティリティを使用します。

主要な英語辞書の中で最も長い単語は pneumonoultramicroscopicsilicovolcanoconiosis です。これは、非常に細かいシリカ粒子、特に火山からのシリカ粒子の吸入によって引き起こされる肺疾患を指す言葉です。医学的には、シリコーシスと同じです。

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

Break Keep

中国語/日本語/韓国語(CJK)テキストに改行が適用されないようにするには、break-keepユーティリティを使用します。

抗衡不屈不撓 (kànghéng bùqū bùnáo) これは、強大な力に抵抗し、屈することなく、粘り強く、決して諦めないという意味の長い単語です。この言葉は通常、困難や挑戦に直面しても自分の信念を貫き、あらゆる困難を克服し、不屈の精神で目標を追求する人々を表現するために使用されます。どんなに大きな困難に遭遇しても、彼らは最後まで諦めずに、最終的に勝利を手にすることができます。

<p class="break-keep">抗衡不屈不挠...</p>

CJK以外のテキストの場合、break-keepユーティリティはbreak-normalユーティリティと同じ動作をします。

レスポンシブデザイン

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

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

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

Copyright © 2025 Tailwind Labs Inc.·商標ポリシー