换行符

Avatar of Geoff Graham
Geoff Graham

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 严格性的不同级别上是否允许换行。 我们将在此处介绍它们。

情况normalloosestrict
在日语小假名或片假名平假名延长音符之前换行,即 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 和东亚宽度属性 AmbiguousFullwidthWide 的字符。
在前缀之后换行
具有 Unicode 换行符类 PR 和东亚宽度属性 AmbiguousFullwidthWide 的字符。
IEEdgeFirefoxChromeSafariOpera
6+14+69+全部全部15+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
85+81+全部59+
来源:caniuse