排版
用于控制元素的 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 工具类使文本在元素内正常换行。换行符和空格将被折叠：
大家好！ 快到2022年了，我们仍然不知道是否有外星人生活在我们当中，还是我们不知道？也许写这篇文章的人就是外星人。 你永远不会知道。
<p class="whitespace-normal">大家好！快到2022年了，我们仍然不知道是否有外星人生活在我们当中，还是我们不知道？也许写这篇文章的人就是外星人。你永远不会知道。</p>使用 whitespace-nowrap 工具类防止文本在元素内换行。换行符和空格将被折叠：
大家好！ 快到2022年了，我们仍然不知道是否有外星人生活在我们当中，还是我们不知道？也许写这篇文章的人就是外星人。 你永远不会知道。
<p class="overflow-auto whitespace-nowrap">大家好！快到2022年了，我们仍然不知道是否有外星人生活在我们当中，还是我们不知道？也许写这篇文章的人就是外星人。你永远不会知道。</p>使用 whitespace-pre 工具类在元素内保留换行符和空格。文本将不会换行：
大家好！ 快到2022年了，我们仍然不知道是否有外星人生活在我们当中，还是我们不知道？也许写这篇文章的人就是外星人。 你永远不会知道。
<p class="overflow-auto whitespace-pre">大家好！快到2022年了，我们仍然不知道是否有外星人生活在我们当中，还是我们不知道？也许写这篇文章的人就是外星人。你永远不会知道。</p>使用 whitespace-pre-line 工具类保留换行符但不保留空格。文本将正常换行：
大家好！ 快到2022年了，我们仍然不知道是否有外星人生活在我们当中，还是我们不知道？也许写这篇文章的人就是外星人。 你永远不会知道。
<p class="whitespace-pre-line">大家好！快到2022年了，我们仍然不知道是否有外星人生活在我们当中，还是我们不知道？也许写这篇文章的人就是外星人。你永远不会知道。</p>使用 whitespace-pre-wrap 工具类在元素内保留换行符和空格。文本将正常换行：
大家好！ 快到2022年了，我们仍然不知道是否有外星人生活在我们当中，还是我们不知道？也许写这篇文章的人就是外星人。 你永远不会知道。
<p class="whitespace-pre-wrap">大家好！快到2022年了，我们仍然不知道是否有外星人生活在我们当中，还是我们不知道？也许写这篇文章的人就是外星人。你永远不会知道。</p>使用 whitespace-break-spaces 工具类在元素内保留换行符和空格。行末的空格不会悬挂，而是换到下一行：
大家好！ 快到2022年了，我们仍然不知道是否有外星人生活在我们当中，还是我们不知道？也许写这篇文章的人就是外星人。 你永远不会知道。
<p class="whitespace-break-spaces">大家好！快到2022年了，我们仍然不知道是否有外星人生活在我们当中，还是我们不知道？也许写这篇文章的人就是外星人。你永远不会知道。</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 ..."> <!-- ... --></p>Learn more about using variants in the variants documentation.