空白 - Tailwind CSS

クラス	プロパティ
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;
whitespace-break-spaces	white-space: break-spaces;

クラス

プロパティ

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;

whitespace-break-spaces

white-space: break-spaces;

...基本的な使い方

...ノーマル

whitespace-normal を使用すると、要素内でテキストが通常どおり折り返されます。改行とスペースは折りたたまれます。

皆さんこんにちは！もうすぐ2022年ですが、まだ宇宙人が私たちの間に住んでいるかどうか分かりません。もしかしたら、これを書いている人が宇宙人かもしれません。あなたは決して知る由もありません。

<div class="w-3/4 ...">
  <div class="whitespace-normal ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

...折り返しなし

whitespace-nowrap を使用すると、要素内でテキストが折り返されないようにします。改行とスペースは折りたたまれます。

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-nowrap ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

...Pre

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

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-pre ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

...Pre Line

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

<div class="w-3/4 ...">
  <div class="whitespace-pre-line ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

...Pre Wrap

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

<div class="w-3/4 ...">
  <div class="whitespace-pre-wrap ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

...スペースの改行

whitespace-break-spaces を使用すると、要素内の改行とスペースが保持されます。行末の空白はぶら下がりませんが、次の行に折り返されます。

<div class="w-3/4 ...">
  <div class="whitespace-break-spaces ...">Hey everyone!

It's almost 2022       and we still don't know if there       is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

..条件付きで適用する

..ホバー、フォーカス、その他の状態

Tailwind では、バリアント修飾子を使用して、さまざまな状態でユーティリティクラスを条件付きで適用できます。たとえば、以下を使用します。 ホバー:whitespace-pre whitespace-pre ユーティリティのみを以下に適用するにはホバー.

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

利用可能なすべての状態修飾子の完全なリストについては、ホバー、フォーカス、その他の状態のドキュメントを参照してください。

..ブレークポイントとメディアクエリ

レスポンシブブレークポイント、ダークモード、prefers-reduced-motion などのメディアクエリをターゲットにするために、バリアント修飾子を使用することもできます。たとえば、md:whitespace-pre を使用すると、whitespace-pre ユーティリティが中程度の画面サイズ以上でのみ適用されます。

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

詳細については、以下のドキュメントを参照してください。レスポンシブデザイン, ダークモードおよびその他のメディアクエリ修飾子.

空白

クイックリファレンス