| 类名 | 样式 |
|---|---|
| .text-wrap | text-wrap: wrap; |
| .text-nowrap | text-wrap: nowrap; |
| .text-balance | text-wrap: balance; |
| .text-pretty | text-wrap: pretty; |
| .text-break | word-wrap: break-word; word-break: break-word; |
换行
使用 text-wrap 工具控制元素内部文本的换行。这是一个新的 CSS 属性，替代了旧的 white-space 属性，并增加了新的功能。
这段文字应在父元素内换行显示。
此文本不应在父元素内换行显示。
这段文字应该在父元素内以均衡的方式换行成多行。
这段文字应该在父元素内以漂亮的方式换行显示成多行。
<div class="text-wrap">…</div>
<div class="text-nowrap">…</div>
<div class="text-balance">…</div>
<div class="text-pretty">…</div>单词断行
通过使用 .text-break 设置 word-wrap: break-word 和 word-break: break-word，可以防止长文本字符串破坏组件的布局。我们使用 word-wrap 而不是更常见的 overflow-wrap 以获得更广泛的浏览器支持，并添加已弃用的 word-break: break-word 以避免 flex 容器的问题。
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>CSS
Sass 工具 API
文本换行工具在我们的工具 API 中的 scss/_utilities.scss 声明。了解如何使用工具 API。
"text-wrap": (
property: text-wrap,
class: text,
values: wrap nowrap balance pretty,
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
),