字体
用于控制元素空白处理方式的工具类。
| 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 ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.