空白

要素の空白プロパティを制御するためのユーティリティ。

Class reference

Class
Properties
.whitespace-normalwhite-space: normal;
.whitespace-no-wrapwhite-space: nowrap;
.whitespace-prewhite-space: pre;
.whitespace-pre-linewhite-space: pre-line;
.whitespace-pre-wrapwhite-space: pre-wrap;

Normal

.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 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>

No Wrap

.whitespace-no-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 class="whitespace-no-wrap overflow-x-auto">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>

Pre

要素内の改行とスペースを保持するには、.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 class="whitespace-pre overflow-x-auto">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>

Pre Line

.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 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>

Pre Wrap

.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 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>

Responsive

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

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

<div class="whitespace-normal sm:whitespace-no-wrap md:whitespace-pre lg:whitespace-pre-line xl:whitespace-pre-wrap ...">...</div>
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.

Customizing

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!