排版
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; |
示例(Examples)
¥Examples
普通(Normal)
¥Normal
使用 whitespace-normal 工具使文本在元素内正常换行。换行符和空格将被折叠：
¥Use the whitespace-normal utility to cause text to wrap normally within an element. Newlines and spaces will be collapsed:
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)
¥No Wrap
使用 whitespace-nowrap 工具防止文本在 元素。换行符和空格将被折叠：
¥Use the whitespace-nowrap utility to prevent text from wrapping within an element. Newlines and spaces will be collapsed:
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)
¥Pre
使用 whitespace-pre 工具保留元素内的换行符和空格。文本不会换行：
¥Use the whitespace-pre utility to preserve newlines and spaces within an element. Text will not be wrapped:
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)
¥Pre Line
使用 whitespace-pre-line 工具保留元素内的换行符但不保留空格。文本将正常换行：
¥Use the whitespace-pre-line utility to preserve newlines but not spaces within an element. Text will be wrapped normally:
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)
¥Pre Wrap
使用 whitespace-pre-wrap 工具保留元素内的换行符和空格。文本将正常换行：
¥Use the whitespace-pre-wrap utility to preserve newlines and spaces within an element. Text will be wrapped normally:
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)
¥Break Spaces
使用 whitespace-break-spaces 工具保留元素内的换行符和空格。行末的空白不会挂起，但会换行到下一行：
¥Use the whitespace-break-spaces utility 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:
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>响应式设计(Responsive design)
¥Responsive design
在 white-space 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<p class="whitespace-pre md:whitespace-normal ..."> <!-- ... --></p>请参阅 变体文档 详细了解如何使用变体。