white-space
用于控制元素 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; |
示例
Normal
使用 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.
<!-- [!code classes:whitespace-normal] -->
<!-- prettier-ignore -->
<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>No Wrap
使用 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.
<!-- [!code classes:whitespace-nowrap] -->
<!-- prettier-ignore -->
<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>Pre
使用 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.
<!-- [!code classes:whitespace-pre] -->
<!-- prettier-ignore -->
<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>Pre Line
使用 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.
<!-- [!code classes:whitespace-pre-line] -->
<!-- prettier-ignore -->
<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>Pre Wrap
使用 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.
<!-- [!code classes:whitespace-pre-wrap] -->
<!-- prettier-ignore -->
<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>Break Spaces
使用 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.
<!-- [!code classes:whitespace-break-spaces] -->
<!-- prettier-ignore -->
<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>响应式设计
使用 md: 等断点变体作为 white-space 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：
<p class="whitespace-pre md:whitespace-normal ...">
Lorem ipsum dolor sit amet...
</p>更多关于变体的用法，请参阅变体文档。