タイポグラフィ
要素の white-space プロパティを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
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 ユーティリティを使用して、要素内でテキストが通常どおり折り返されるようにします。改行とスペースは折りたたまれます。
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="whitespace-normal">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>whitespace-nowrap ユーティリティを使用して、要素内でテキストが折り返されないようにします。改行とスペースは折りたたまれます。
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="overflow-auto whitespace-nowrap">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>whitespace-pre ユーティリティを使用して、要素内で改行とスペースを保持します。テキストは折り返されません。
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="overflow-auto whitespace-pre">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>whitespace-pre-line ユーティリティを使用して、要素内で改行を保持しますが、スペースは保持しません。テキストは通常どおり折り返されます。
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="whitespace-pre-line">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>whitespace-pre-wrap ユーティリティを使用して、要素内で改行とスペースを保持します。テキストは通常どおり折り返されます。
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="whitespace-pre-wrap">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>whitespace-break-spaces ユーティリティを使用して、要素内で改行とスペースを保持します。行末の空白はぶら下がりませんが、次の行に折り返されます。
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="whitespace-break-spaces">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>プレフィックスa white-space ユーティリティ md: のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 以上のスクリーンサイズのみになります。
<p class="whitespace-pre md:whitespace-normal ..."> Lorem ipsum dolor sit amet...</p>バリアントのドキュメントで、バリアントの使用方法について詳しく学んでください。