Whitespace 空格
控制元素的空白间距属性的实用工具。
| Class | Properties |
|---|
基本用法
Normal 正常
使用 whitespace-normal 使文本在元素内正常换行。换行和空格将被折叠。
<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>No Wrap 不换行
使用 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 来保留元素内的换行符和空格。文本不会被换行。
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 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 来保留元素内的换行符，但不保留空格。文本将正常换行。
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 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 来保留元素内的换行符和空格。文本将正常换行。
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 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>Break Spaces 打破空格
使用 whitespace-break-spaces 来保留元素内的换行和空格。行尾的空白不会悬挂，而是换行到下一行。
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 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 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:whitespace-pre 只在悬停时应用 whitespace-pre 实用程序。
<p class="whitespace-normal hover:whitespace-pre">
<!-- ... -->
</p>有关所有可用状态修改器的完整列表，请查看悬停、焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:whitespace-pre 仅在中等屏幕尺寸及以上应用 whitespace-pre 实用程序。
<p class="whitespace-normal md:whitespace-pre">
<!-- ... -->
</p>