换行样式失效问题的排查

在项目中出现了换行异常问题：原本不应被断开的单词被错误地拆分换行，例如：

Hello Wor
ld!

通常，此类问题可以通过在容器元素上添加 text-wrap、word-break、white-space 等 CSS 属性来避免。
但在本次情况中，即便显式增加了这些样式，问题依然存在。

怀疑样式被覆盖后，打开开发者工具进行调试，却发现相关样式确实已生效，并未被覆盖。

随后手动重新输入文本，但显示依旧，排除了文本内容异常的可能。

于是将排查方向转向继承关系与全局样式干扰。

最终发现，全局样式中定义了以下规则：

line-break: anywhere;

link-break, 是用于处理带有标点符号的 CJK （中日韩）文案的换行问题的 CSS 属性。

目前主流浏览器基本都已支持。

取值如下：

line-break: auto;     /* 默认换行规则 */
line-break: loose;    /* 较宽松的换行规则 */
line-break: normal;   /* 一般换行规则 */
line-break: strict;   /* 严格换行规则 */
line-break: anywhere; /* 允许在任意字符间换行，忽略阻止换行的字符和其他换行控制属性 */

因为它是可继承的属性，使得定义在全局样式中的它让页面中所有元素都继承到了。

因此当尝试使用 text-wrap、word-space 等样式时不会生效。

随后，在出现问题的元素上显示覆盖该属性后，换行问题解决了。