CSS word-break属性

在 CSS 中，word-break 属性用于指定当一个单词不能完全适应容器时，浏览器如何处理换行、断字和添加连字符。该属性通常用于处理非英语文本（如中文、日文等）中单词的换行和断字。

语法

word-break 属性有以下取值：

• normal（默认值）：默认的换行规则，浏览器将根据需要进行换行和断字。
• break-all：浏览器在单词内部任意位置进行断字，即使这样会产生较大的间隙。这种情况适用于非英语单词。
• keep-all：禁止在单词内部断字，适用于大部分非英语文本中的样式，如中文和日文。

示例

.container {
  width: 200px;
  word-break: break-all;
}

上述代码片段将使包含在 .container 类名的元素在单词内部断字，即使断字会导致比正常间隙更大的间隙。

支持的浏览器

word-break 属性在现代浏览器中得到广泛支持。根据 MDN 网站的统计，它的兼容性如下：

• Chrome：所有版本
• Firefox：从版本 15 开始
• Safari：从版本 3 开始
• Opera：从版本 12.1 开始
• Internet Explorer：从版本 5.5 开始

请注意，IE 浏览器对于非英语文本的换行和断字支持相对较差。在处理非英语文本时，建议使用 break-all 或 keep-all 来兼容不同浏览器。

更多关于 word-break 属性的信息和用法，请参阅 MDN 网站的文档。