CSS文本属性word-break、overflow-wrap(word-wrap)、white-space

word-break

CSS 属性 word-break 指定了怎样在单词内断行。指定如何打断单词以适应容器的宽度。它允许你控制当一行内不能容纳所有单词时，浏览器是否可以在单词内部进行断行。

• 常用取值有：
  • normal：默认值，只在半角空格或连字符处断行。
  • break-all：允许在单词内任意位置断行。
  • keep-all：禁止在CJK（中文、日文、韩文）文本中的换行，尝试在单词边界换行。
  • break-word（CSS3）：允许在长不可分割单词或URL处进行断行。

overflow-wrap(word-wrap)

应用于行级元素，用来设置浏览器是否应该在一个本来不能断开的字符串中插入换行符，以防止文本溢出其行向盒。

备注：  与 word-break 相比，overflow-wrap 仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生换行。

• 可选值包括：
  • normal（默认）：只有在遇到正常的换行机会（如空格、连字符等）时才换行。
  • break-word 或 anywhere（CSS3）：允许在必要时在单词内断行，以防止文本超出其容器边界。

white-space

white-space属性用于控制元素内部的空白字符如何处理。这会影响到换行符、空格和制表符的展现方式，决定文本是否换行以及空白字符如何处理。

white-space属性的可能值包括：

• normal连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。

• nowrap和 normal 一样合并空白符，但阻止源码中的文本换行。

• pre连续的空白符会被保留。仅在遇到换行符或 <br> 元素时才会换行。

• pre-wrap连续的空白符会被保留。在遇到换行符或 <br> 元素时，或者根据填充行框盒子的需要换行。

• pre-line连续的空白符会被合并。在遇到换行符或 <br> 元素时，或者根据填充行框盒子的需要换行。

• break-spaces与 pre-wrap 的行为相同，除了：

  • 任何保留的空白序列总是占用空间，包括行末的。
  • 每个保留的空白字符后（包括空白字符之间）都可以被截断。
  • 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容——min-content——大小和最大内容——max-content——大小）。

	换行符	空格和制表符	文本换行	行末空格	行末的其他空白分隔符
normal	合并	合并	换行	移除	挂起
nowrap	合并	合并	不换行	移除	挂起
pre	保留	保留	不换行	保留	不换行
pre-wrap	保留	保留	换行	挂起	挂起
pre-line	保留	合并	换行	移除	挂起
break-spaces	保留	保留	换行	换行	换行