css~word-break属性

CSS中如何强制换行“....................................”？

当盒子宽度能放下“...”元素时，正常展示如下：

当盒子宽度不够放“...”元素时，文本就会溢出，导致整个内容被截断：

如何才能让其正常展示而不溢出呢？

原始样式：word-break: "break-all";

修正后：

• 方案一：修改“word-break”的属性值：word-break: "break-word";
• 方案二：增加属性：overflow-wrap: "anywhere";

理论上，“break-all”比“break-word”强制换行的范围更大，为什么这里没生效呢？仔细看文档，人家排出中文了！！！

那么，word-break与overflow-wrap有什么区别呢？？

• 与 word-break 相比，overflow-wrap 仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生换行。
• 当word-break的值为break-word时，他的效果是word-break: normal 和 overflow-wrap: anywhere 的合，不论 overflow-wrap的值是多少。

但是：“break-word”是一个即将弃用的属性值，可以使用overflow-wrap: anywhere替代。

参考链接：

1. word-break - CSS | MDN
2. overflow-wrap - CSS：层叠样式表 | MDN