【Tailwind和訳】TYPOGRAPHY/Text Overflow

この記事について

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

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Text Overflow

要素内のテキストのオーバーフローを制御するためのユーティリティ。

Class	Properties
truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
overflow-ellipsis	text-overflow: ellipsis;
overflow-clip	text-overflow: clip;

Truncate

必要に応じて省略記号（...）をつけて、あふれたテキストを切り捨てるにはtruncateを使います。

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

Overflow Ellipsis

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

<p class="overflow-ellipsis overflow-hidden ...">...</p>

Overflow Clip

overflow-clipを使って、コンテンツエリアの限界でテキストを切り詰めます。

<p class="overflow-clip overflow-hidden ...">...</p>

レスポンシブ

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

<p class="truncate md:overflow-clip ...">
  <!-- ... -->
</p>

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

カスタマイズ

バリアント

デフォルトでは、レスポンシブバリアントのみがテキストオーバーフローユーティリティのために生成されます。

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

例えば、この設定ではhoverとfocusのバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       textOverflow: ['hover', 'focus'],
      }
    }
  }

無効化

プロジェクトでテキストオーバーフローユーティリティを使用しない場合は、設定ファイルのcorePluginsセクションでtextOverflowプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+     textOverflow: false,
    }
  }