排版
text-wrap
用于控制元素中文本换行的工具。
| 类 | 样式 |
|---|---|
text-wrap | text-wrap: wrap; |
text-nowrap | text-wrap: nowrap; |
text-balance | text-wrap: balance; |
text-pretty | text-wrap: pretty; |
示例(Examples)
允许文本换行(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)
使用 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)
使用 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)
使用 text-pretty 工具可以在牺牲速度的情况下实现更好的文本换行和布局。不同浏览器的表现各不相同，但通常涉及防止孤行（文本块末尾单独一行的单词）等方法：
🌐 Use the text-pretty utility to prefer better text wrapping and layout at the expense of speed. Behavior varies across browsers but often involves approaches like preventing 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)
在 text-wrap 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<h1 class="text-pretty md:text-balance ..."> <!-- ... --></h1>请参阅 变体文档 详细了解如何使用变体。