iOS16下的标准自动换行方式

word-break属性在iOS16下出现了问题

spark1e ·

最新的正确写法

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截至最新版本仍不支持,但是我在真机确实可以用的。

overflow-wrap: break-word时,iOS16以上与原来的word-break: break-all一致

overflow-wrap: anywhere时,15.7 与 16 都能正常换行

iOS16下的标准自动换行方式
本文作者
spark1e
发布于
2022-10-13
许可协议
转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!
评论区 - Powered by Giscus