排版
用于控制元素的空白属性的工具。
¥Basic usage
¥Normal
使用 whitespace-normal
使文本在元素内正常换行。换行符和空格将被折叠。
¥Use whitespace-normal
to cause text to wrap normally within an element. Newlines and spaces will be collapsed.
<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
可防止文本在元素内换行。换行符和空格将被折叠。
¥Use whitespace-nowrap
to prevent text from wrapping within an element. Newlines and spaces will be collapsed.
<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
保留元素中的换行符和空格。文本不会换行。
¥Use whitespace-pre
to preserve newlines and spaces within an element. Text will not be wrapped.
<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
保留元素中的换行符而不是空格。文本将正常换行。
¥Use whitespace-pre-line
to preserve newlines but not spaces within an element. Text will be wrapped normally.
<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
保留元素中的换行符和空格。文本将正常换行。
¥Use whitespace-pre-wrap
to preserve newlines and spaces within an element. Text will be wrapped normally.
<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
保留元素中的换行符和空格。行尾的空白不会挂起,但会换行到下一行。
¥Use whitespace-break-spaces
to preserve newlines and spaces within an element. White space at the end of lines will not hang, but will wrap to the next line.
<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
仅在 hover 时应用 whitespace-pre
工具。
<div class="whitespace-normal hover:whitespace-pre">
<!-- ... -->
</div>
有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。
你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:whitespace-pre
仅在中等屏幕尺寸及以上时应用 whitespace-pre
工具。
<div class="whitespace-normal md:whitespace-pre">
<!-- ... -->
</div>