排版
用于控制元素内文本换行方式的工具类。
| Class | Styles |
|---|---|
text-wrap | text-wrap: wrap; |
text-nowrap | text-wrap: nowrap; |
text-balance | text-wrap: balance; |
text-pretty | text-wrap: pretty; |
使用 text-wrap 工具类可以让溢出的文本在逻辑断点处自动换行：
随着纽约最受尊敬的汤摊在一系列令人困惑的事件后突然关闭，纽约人今年将面临少了些许温暖的寒冬。
<article class="text-wrap"> <h3>曼哈顿最受欢迎的汤摊关闭</h3> <p>纽约人正面临寒冬...</p></article>使用 text-nowrap 工具类可以防止文本换行，在必要时允许文本溢出：
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
<article class="text-nowrap"> <h3>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>使用 text-balance 工具类可以均匀分布每行的文本：
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
<article> <h3 class="text-balance">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>出于性能考虑，浏览器会将文本平衡限制在约6行以内的区块，因此该功能最适合用于标题。
使用 text-pretty 工具类可以防止文本块末尾出现孤行（单独一行只有一个单词）：
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
<article> <h3 class="text-pretty">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>Prefix a text-wrap utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<h1 class="text-pretty md:text-balance ..."> <!-- ... --></h1>Learn more about using variants in the variants documentation.