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.
<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.
<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.
<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.
<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.
<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.
<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>
响应式设计
在 white-space 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：
<p class="whitespace-pre md:whitespace-normal ...">
Lorem ipsum dolor sit amet...
</p>
在 变体文档 中了解更多关于使用变体的信息。