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

更新日期: 2019-09-27 阅读次数: 4385 字数: 130 分类: CSS

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

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 聊聊, 查看更多联系方式