排版
用于控制元素的 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.