字体排印
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; |
示例
普通
使用 whitespace-normal 实用程序使文本在元素内正常换行。换行符和空格将被折叠
大家好！现在都快 2022 年了，我们仍然不知道是否有外星人生活在我们中间，或者我们知道吗？也许写这个的人就是外星人。你永远不会知道。
<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 实用程序防止文本在元素内换行。换行符和空格将被折叠
大家好！现在都快 2022 年了，我们仍然不知道是否有外星人生活在我们中间，或者我们知道吗？也许写这个的人就是外星人。你永远不会知道。
<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 实用程序保留元素内的换行符和空格。文本不会被换行
大家好！现在都快 2022 年了，我们仍然不知道是否有外星人生活在我们中间，或者我们知道吗？也许写这个的人就是外星人。你永远不会知道。
<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 实用程序保留元素内的换行符，但不保留空格。文本将正常换行
大家好！现在都快 2022 年了，我们仍然不知道是否有外星人生活在我们中间，或者我们知道吗？也许写这个的人就是外星人。你永远不会知道。
<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 实用程序保留元素内的换行符和空格。文本将正常换行
大家好！现在都快 2022 年了，我们仍然不知道是否有外星人生活在我们中间，或者我们知道吗？也许写这个的人就是外星人。你永远不会知道。
<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 实用程序保留元素内的换行符和空格。行尾的空格不会悬挂，而是会换到下一行
大家好！现在都快 2022 年了，我们仍然不知道是否有外星人生活在我们中间，或者我们知道吗？也许写这个的人就是外星人。你永远不会知道。
<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: 这样的断点变体一起使用，仅在以下情况下应用该实用程序中等 屏幕尺寸及以上
<p class="whitespace-pre md:whitespace-normal ..."> <!-- ... --></p>了解有关在变体文档中使用变体的更多信息。
