排版
text-wrap
用于控制文本如何在元素内换行的工具。
| 类 | 样式 |
|---|---|
text-wrap | text-wrap: wrap; |
text-nowrap | text-wrap: nowrap; |
text-balance | text-wrap: balance; |
text-pretty | text-wrap: pretty; |
示例(Examples)
¥Examples
允许文本换行(Allowing text to wrap)
¥Allowing text to wrap
使用 text-wrap 工具将溢出文本换行到多行在文本中的逻辑点：
¥Use the text-wrap utility to wrap overflowing text onto multiple lines at logical points in the text:
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>防止文本换行(Preventing text from wrapping)
¥Preventing text from wrapping
使用 text-nowrap 工具防止文本换行，必要时允许文本溢出：
¥Use the text-nowrap utility to prevent text from wrapping, allowing it to overflow if necessary:
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>平衡文本换行(Balanced text wrapping)
¥Balanced text wrapping
使用 text-balance 工具将文本均匀分布在每行上：
¥Use the text-balance utility to distribute the text evenly across each line:
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 行或更少的块，使其最适合标题。
¥For performance reasons browsers limit text balancing to blocks that are ~6 lines or less, making it best suited for headings.
漂亮的文本换行(Pretty text wrapping)
¥Pretty text wrapping
使用 text-pretty 工具防止文本块末尾出现孤行（单个单词占一行）：
¥Use the text-pretty utility to prevent orphans (a single word on its own line) at the end of a text block:
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>响应式设计(Responsive design)
¥Responsive design
在 text-wrap 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<h1 class="text-pretty md:text-balance ..."> <!-- ... --></h1>请参阅 变体文档 详细了解如何使用变体。