HTML<p>标签段落单词换行截断问题排查求助

这个问题其实是浏览器默认的文本换行规则在搞鬼～

当你的<p>标签所在的容器宽度不够容纳整个句子时，浏览器默认的word-break属性值是normal，这个规则允许浏览器在单词内部断行来填充行空间，所以像"promoted"这种较长的单词就会被从中间截断，而不是完整地跳到下一行。

要解决这个问题，你只需要给<p>元素添加一点CSS规则，强制浏览器不在单词内部断行：

方法一：使用word-break: keep-all #

这个规则会让浏览器只在空格或者连字符的位置换行，完全禁止单词内部的截断，这样整个单词就会完整地显示在新行里：

p {
  word-break: keep-all;
}

方法二：使用overflow-wrap: break-word #

这个规则会优先尝试把整个单词放在当前行，如果实在放不下，才会在单词内部断行（不过如果容器宽度不是极端狭窄的话，一般都会让单词完整移到下一行）：

p {
  overflow-wrap: break-word;
}

另外，如果你的容器宽度设置得过于狭窄，也可以适当调整容器的宽度，从根源上避免这种情况哦～

内容的提问来源于stack exchange，提问作者Marcelino Pietero