使用CSS解决移动端safari浏览器中单词被切断并显示中划线问题

有时候我们会在手机端的safari浏览器上遇到英文单词在换行时被切断且被中横线相连的问题。这种呈现方式会影响阅读体验,那么如何解决呢?

要解决上述问题,我们只需要使用下面两种方法之一即可:

* {
    -moz-hyphens:none;
    -ms-hyphens:none;
    -webkit-hyphens: none;
    hyphens:none;
}

或者

* {
    word-break:keep-all;
}

加入以上CSS后的效果截图如下:

the end