英文网站下 CSS 属性 word-break 的设置

文章目录

    我发现新建的英文网站,单词在行尾会被强行拆分换行,非常影响阅读。

    word-break 的三种模式

    • normal:使用默认的断行规则。
    • break-all:对于英文单词,会在行尾强制将单词拆分,进行换行。如果是英文网站,这种体验会非常不好。
    • keep-all:即便是中文也不会断行。

    word-wrap 作为补充

    • normal
    • break-word: 对特别长的单词有效。特别长是指,自己独占一行时都装不下的情况。这种情况会强制换行,而默认的 normal 模式不会换行。

    结论

    英文网站应该采用:

    word-break: normal;
    word-wrap: break-word;
    

    参考

    https://juejin.im/post/5b8905456fb9a01a105966b4

    关于作者 🌱

    我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊,或者关注我的个人公众号“大象工具”, 查看更多联系方式