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