下面这种单词直接打断换行：

这里涉及到两个css属性（很多年傻傻分不清）：

word-break （当行尾放不下一个单词时，决定单词内部该怎么摆放）

word-wrap（当行尾放不下时，决定单词内是否允许换行）

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行（强行上，挤不下的话剩下的就换下一行显示）。

keep-all 只能在半角空格或连字符处换行（放不下了，那就另起一行展示）。

normal 只在允许的断字点换行（单词太长，换行显示，再超过一行就溢出显示）。

break-word 在长单词或 URL 地址内部进行换行（当单词太长时，先尝试换行，换行后还是太长，单词内还可以换行）。

还有话说！

注意，上面这些换行神马的都是针对英文单词，像CJK(中文/日文/韩文)这样的语言就算了，因为他们不需要（真不影响阅读）。

在来看开头那张图里的问题，你加上 word-break: keep-all;word-wrap: break-word;正常就可以了。如有问题，欢迎讨论评论区或者直接私信。