空白与文本换行

长念阅读约 2 分钟3 年前发布

© 转载需要保留原始链接，未经明确许可，禁止商业使用。支持原创 CC BY-NC-SA 4.0

white-space

这个属性是用来设置如何处理元素中空白字符的：

• 空白字符是否合并，如何合并。
• 是否换行，如何换行

文字换行：指的是文本超出容器的默认自动换行。

定义

• 空白字符 (spaces): 只包括 空格、制表符、换行符
  
• 其他空白分隔符 (other space separators): 空白字符以外的其他空白字符，如全角空格、零宽空格等

属性值	作用	换行符	空格/制表符	文字换行	行尾空格	行尾其他空白分隔符
normal	合并连续空白符，换行符会被当作空白符处理。根据填充行框盒子的需要来换行	合并	合并	换行	删除	挂起
nowrap	合并连续空白符，阻止文本换行。	合并	合并	不换行	删除	挂起
pre	保留连续空白符，仅在遇到换行符或 <br> 元素时才会换行。	保留	保留	不换行	保留	不换行
pre-wrap	保留连续空白符，遇到换行符或 <br> 元素时换行，或根据填充行框盒子的需要换行	保留	保留	换行	挂起	挂起
pre-line	合并连续空白符，遇到换行符或 <br> 元素时换行，或根据填充行框盒子的需要换行。	保留	合并	换行	删除	挂起
break-spaces		保留	保留	换行	换行	换行

注意

<br /> 元素始终都会导致换行。

word-break

这个属性指定了在一个单词的内部如何换行。

属性值	作用
normal	完整单词不会被折断，尽可能地独占一行；CJK (中日韩) 文字折行
break-all	完整的单词会被折断换行；CJK 文字折行
keep-all	完整的单词不会换行，即使超出容器；CJK 文字也不折行
break-word	已废弃 效果是 word-break: normal 和 overflow-wrap: anywhere 的合，忽略 overflow-wrap 的值

overflow-wrap

这个属性也是控制单词如何被拆分换行的，实际上是作为 word-break 的互补。与 word-break 相比，overflow-wrap 仅在无法将整个单词放在自己的行而不会溢出的情况下才会换行。

属性值	作用
normal	行只能在正常的单词断点（例如两个单词之间的空格）处换行。
anuwhere	为防止溢出，如果行中没有其他可接受的断点，则不可断的字符串（如长词或 URL）可能会在任何时候换行。在断点处不会插入连字符。在计算最小内容内在大小时，会考虑由单词换行引入的软换行机会。
break-word	与 anywhere 值相同，如果行中没有其他可接受的断点，则允许在任意点将通常不可断的单词换行，但在计算最小内容内在大小时不考虑断字引入的软换行机会。

提示

这个属性原本属于微软扩展的一个非标准、无前缀的属性，叫做 word-wrap，后来在大多数浏览器中以相同的名称实现。目前它已被更名为 overflow-wrap，word-wrap 相当于其别称。