Typography
text-wrap
用于控制元素中文本如何换行的工具功能.
| Class | Styles |
|---|---|
text-wrap | text-wrap: wrap; |
text-nowrap | text-wrap: nowrap; |
text-balance | text-wrap: balance; |
text-pretty | text-wrap: pretty; |
示例
允许文本换行
使用 text-wrap 工具类使超出部分根据逻辑点换行：
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-wrap"> <h3>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</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.
