単語区切り

要素の単語区切りを制御するためのユーティリティ。

Class reference

Class
Properties
.break-normaloverflow-wrap: normal; word-break: normal;
.break-wordsoverflow-wrap: break-word;
.break-allword-break: break-all;
.truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;

Normal

.break-normalを使用して、通常の単語ブレークポイントにのみ改行を追加します。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

<p class="break-normal ...">...</p>

Break Words

必要に応じて、.break-wordsを使用して、単語の途中で改行を追加します。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

<p class="break-words ...">...</p>

Break All

.break-allを使用して、単語全体を保持しようとせずに、必要に応じて改行を追加します。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

<p class="break-all ...">...</p>

Truncate

必要に応じて、.truncateを使用して、オーバーフローしたテキストを省略記号()で切り捨てます。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

<p class="truncate ...">...</p>

Responsive

特定のブレークポイントでのみ要素のワードブレイクを制御するには、既存のワードブレイクユーティリティに{screen}:プレフィックスを追加します。 たとえば、クラスmd:break-allを要素に追加すると、中程度の画面サイズ以上でbreak-allユーティリティが適用されます。

Tailwindのレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

<p class="break-normal sm:break-words md:break-all lg:truncate xl:break-normal ...">
  ...
</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

Customizing

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはword break utilitiesのために作られます。

あなたはどのバリアントがword break utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのwordBreakプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     wordBreak: ['responsive'],
+     wordBreak: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしword break utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのwordBreak propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     wordBreak: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!