CSS3 word-break 属性

CSS3 word-break 属性定义了当一个单词太长而不能完全容纳在一行时，单词是如何进行换行的。此属性可应用于任何元素，但只有在文本容器中使用才有意义。

语法

word-break: normal|break-all|keep-all;

• normal：默认值。单词内部不换行，只在单词之间换行。
• break-all：允许单词内换行。
• keep-all：禁止单词内换行，只能在空格或连字符处换行。

举例

normal

p {
  width: 200px;
  word-break: normal;
}

当较长的单词超出了容器的宽度时，它们将只能在单词之间进行换行。这是默认的值，因此您不需要为此设置任何内容。

break-all

p {
  width: 200px;
  word-break: break-all;
}

这种设置意味着CSS在单词内部插入换行符。实际上，较长的单词将被分成多个行，而无需等待单词末尾。

keep-all

p {
  width: 200px;
  word-break: keep-all;
}

这种设置意味着CSS不会在单词内插入换行符，只在空格或连字符处进行换行。如果使用此选项，则较长的单词将被保留在一行上，除非它们遇到连字符或空格为止。

兼容性

总结

在设计响应式网站时，确保您完全掌握 word-break 属性的作用是很重要的。它可以确保文本在页面中更好地布局和分隔，同时也可以使您网站的排版显得更专业和富有吸引力。