💤

【Tailwind和訳】TYPOGRAPHY/Word Break

2021/10/24に公開約1,900字

この記事について

この記事は、TYPOGRAPHY/Word Breakの記事を和訳したものです。

Word Break

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

Class Properties
break-normal overflow-wrap: normal;
word-break: normal;
break-words overflow-wrap: break-word;
break-all word-break: break-all;

Normal

break-normalを使用すると、通常の単語の区切り位置でのみ改行が追加されます。

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

Break Words

break-wordsを使って、必要に応じて単語の途中で改行を加える。

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

Break All

break-allを使用すると、必要に応じて改行が追加されますが、単語全体が保持されるわけではありません。

レスポンシブ

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

<p class="break-normal md:break-all ...">
  <!-- ... -->
</p>

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

カスタマイズ

バリアント

デフォルトでは、ワードブレイクユーティリティに対しては、レスポンシブバリアントのみが生成されます。

tailwind.config.jsファイルのvariantsセクションにあるwordBreakプロパティを変更することで、ワードブレイクユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

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

無効化

ワードブレークユーティリティを使用しない場合は、設定ファイルのcorePluginsセクションでwordBreakプロパティをfalseに設定することで、完全に無効にすることができます。

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

Discussion

ログインするとコメントできます