排版
用于控制元素 white-space 属性的工具类。
| Class | Styles |
|---|---|
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 工具类让文本在元素内正常换行。换行符和空格会被合并：
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>使用 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>使用 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>使用 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>使用 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>使用 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>Prefix a white-space utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="whitespace-pre md:whitespace-normal ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.