DigitalOcean 提供适用于您旅程每个阶段的云产品。 立即开始使用 价值 200 美元的免费积分!
CSS 的 line-break
属性定义了如何严格地执行文本换行规则,特别是在处理中日韩 (CJK) 书写系统中的符号和标点符号时。 它包含在 CSS 文本模块级别 3 规范 中,该规范目前处于编辑草案阶段。
.element {
line-break: strict;
}
演示
语法
line-break: auto | loose | normal | strict | anywhere;
- 初始:
auto
- 应用于:所有元素
- 继承:是
- 计算值:按指定
- 动画类型:离散
值
/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;
/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;
auto
: 这让浏览器决定如何实现换行符。 每个浏览器可能根据包括行长在内的因素,在其标准上有所不同。loose
: 这是换行规则的最轻量级执行。 规范将像我们在报纸中看到的短行文本作为使用此值的示例。normal
: 这根据“最常见”的规则集来换行文本。 (请注意,关于最常见规则集是什么或它可能包含的内容没有提供定义。)strict
: 这将执行换行符的最严格规则集。anywhere
: 此值启用 软换行机会,允许文本在空格或标点符号处换行,而不是仅仅在词边界处换行。 它非常适合可能不使用空格或标点符号来分隔单词的语言。 规范指出 CSS 没有定义软换行机会,并且此值识别和利用它们来应用换行规则。 规范将文本换行行为描述为我们在终端中通常看到的行为。
规范还指出,anywhere
值允许在使用 white-space
属性设置为 break-spaces
时,将行尾保留的空格换行到下一行。
不同语言的值行为
正如您可能想象的那样,不同的语言在文本换行到新行的方式方面有不同的偏好。 所有语言都没有使用标准化的约定。 这就留给浏览器来找出并遵循特定语言的“正确”规则。 但是,规范确实概述了几个要求,用于确定在某些情况下,在 line-break
严格性的不同级别上是否允许换行。 我们将在此处介绍它们。
情况 | normal | loose | strict |
---|---|---|---|
在日语小假名或片假名平假名延长音符之前换行,即 Unicode 换行符类 CJ 中的字符 | ❌ | ✅ | ✅ |
在某些 CJK 连字符类字符之前换行 〜 U+301C, ゠ U+30A0 | ❌ | ✅ 如果书写系统是中文或日语 | 允许,如果书写系统是中文或日语 |
在某些 CJK 连字符类字符之前换行 〜 U+301C, ゠ U+30A0 | ❌ | ✅ 如果前一个字符属于 Unicode 换行符类 ID (包括当前一个字符由于 word-break: break-all) 而被视为 ID 时 | ❌ |
在迭代标记之前换行 々 U+3005, 〻 U+303B, ゝ U+309D, ゞ U+309E, ヽ U+30FD, ヾ U+30FE | ❌ | ✅ | ❌ |
在不可分割字符(例如 ‥ U+2025, … U+2026)之间换行,即来自 Unicode 换行符类 IN 的字符 | ❌ | ✅ | ❌ |
在某些居中标点符号之前换行 ・ U+30FB, : U+FF1A, ; U+FF1B, ・ U+FF65, ‼ U+203C, ⁇ U+2047, ⁈ U+2048, ⁉ U+2049, ! U+FF01, ? U+FF1F | ❌ | ✅ | ❌ |
在后缀之前换行 具有 Unicode 换行符类 PO 和东亚宽度属性 Ambiguous 、Fullwidth 或 Wide 的字符。 | ❌ | ✅ | ❌ |
在前缀之后换行 具有 Unicode 换行符类 PR 和东亚宽度属性 Ambiguous 、Fullwidth 或 Wide 的字符。 | ❌ | ✅ | ❌ |
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
6+ | 14+ | 69+ | 全部 | 全部 | 15+ |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
85+ | 否 | 81+ | 全部 | 59+ |
相关属性
block-overflow
.element { block-overflow: clip; }
hanging-punctuation
blockquote p { hanging-punctuation: first; }
hyphens
.element { hyphens: auto; }
overflow-wrap
.element { overflow-wrap: break-word; }
letter-spacing
/element { letter-spacing: .0625em; }
overflow
.element { overflow: hidden; }
text-indent
white-space
word-break
.element { word-break: break-all; }
writing-mode
.element { writing-mode: vertical-rl; }