英文文章,发现“TOYEAN”主题不支持英文单词完整换行。

CSS如何设置让英文单词完整换行

word-break属性用来规定自动换行的处理方式,它不仅可以让浏览器在半角空格或连字符的后面换行,也可以实现在任意位置换行,可选值有 normal | keep-all | break-all,默认值为 normal。

  • normal 表示根据语言自身的换行规则,确定换行方式,中文将容器边界处的汉字换到下一行,西方文字则将整个单词换到下一行;
  • keep-all 表示不允许把单词截断,只能在半角空格或连字符处换行;
  • break-all 允许把单词截断,在单词内换行。

white-space、word-wrap、word-break的区别:

white-space: nowrap让一段文本不换行,在一行内显示。

word-wrap: normal 使一个单词或URL不折行,在一行内显示。

word-wrap: break-word在容器边界自动换行,会把整个长单词看成一个整体放到下一行,而不会把单词截断。

word-break: break-all在行末宽度不够显示整个单词时,会把单词截断。

参考资料: