💤

【Tailwind和訳】TYPOGRAPHY/Whitespace

2021/10/24に公開約4,000字

この記事について

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

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

Whitespace

要素の white-space プロパティを制御するためのユーティリティです。

Class Properties
whitespace-normal white-space: normal;
whitespace-nowrap white-space: nowrap;
whitespace-pre white-space: pre;
whitespace-pre-line white-space: pre-line;
whitespace-pre-wrap white-space: pre-wrap;

通常 | Normal

whitespace-normalを使うと、要素内でのテキストの折り返しが正常に行われます。改行やスペースは潰されます。

<div class="w-3/4 ...">
  <div class="whitespace-normal ...">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem
    tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe
    quam aliquid odio accusamus.
  </div>
</div>

折り返しなし | No Wrap

whitespace-nowrapを使って、要素内でのテキストの折り返しを防ぎます。改行やスペースは折りたたまれます。

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-nowrap ...">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem
    tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe
    quam aliquid odio accusamus.
  </div>
</div>

プレ | Pre

whitespace-preを使用して、要素内の改行とスペースを保持します。テキストは折り返されません。

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-pre ...">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem
    tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe
    quam aliquid odio accusamus.
  </div>
</div>

プリライン | Pre Line

Whitespace-pre-lineを使用すると、要素内の改行は保持されますが、スペースは保持されません。テキストは通常通り折り返されます。

<div class="w-3/4 ...">
  <div class="whitespace-pre-line ...">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem
    tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe
    quam aliquid odio accusamus.
  </div>
</div>

プリラップ | Pre Wrap

Whitespace-pre-wrapを使用して、要素内の改行とスペースを保持します。テキストは通常通り折り返されます。

<div class="w-3/4 ...">
  <div class="whitespace-pre-wrap ...">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem
    tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, reprehenderit saepe
    quam aliquid odio accusamus.
  </div>
</div>

レスポンシブ

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

<div class="whitespace-normal md:whitespace-pre ...">
<!-- ... -->
</div>

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

カスタマイズ

バリアント

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

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

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

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

無効化

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

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

Discussion

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