最新的正确写法
word-break: normal;
overflow-wrap: anywhere;
来源:W3C文档,关于废弃属性值 word-break: break-word;
的平替解释 Link
与之前的比较
在iOS15.7及其以前,都可以只用 word-break: break-all;
来实现,效果没有问题,但是在新的iOS16(16.0.2,16.0.3)样式显示均破坏,于是开始了debug……
废弃的属性?!
word-break
一共就那几个属性值,挨个试试吧。
试到 word-break: break-word;
的时候,好嘛,两边显示效果终于一致了。
但是MDN显示这是已经废弃的属性值啊(Link),怎么新版的safari反而支持回来了呢?
具体是否废弃,还得w3.org说了算
w3c关于word-break的最新定义地址
这里贴上一段在2022-10-13的w3c原文:
For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.
这段话概括来说就是,废弃了但是没完全废弃,对于传统内容,第一,word-break: break-word
还能用,暂时不废弃,安心用;第二,除了用废弃的这个属性,你也可以选择两个标准内的属性组合,实现break-word的效果,即开篇给出的 word-break + overflow-wrap的组合。
不过需要注意的是!Caniuse里对于
overflow-wrap: anywhere;
的可用度可能不是最新的,里面标注iOS上的safari截至最新版本仍不支持,但是我在真机确实可以用的。