以下单词直接中断换行。
这包括两个CSS属性。
Word-break(当行尾不能放置下一个单词时,决定该如何放置在单词内)
Word-wrap(确定无法放置行尾时是否允许在单词内换行)
Normal使用浏览器的默认换行规则。
break-all 允许在单词内换行(强行上,挤不下的话剩下的就换下一行显示)。
keep-all 只能在半角空格或连字符处换行(放不下了,那就另起一行展示)。
normal 只在允许的断字点换行(单词太长,换行显示,再超过一行就溢出显示)。
break-word 在长单词或 URL 地址内部进行换行(当单词太长时,先尝试换行,换行后还是太长,单词内还可以换行)。
还有话说!
注意,上面这些换行神马的都是针对英文单词,像CJK(中文/日文/韩文)这样的语言就算了,因为他们不需要(真不影响阅读)。
在来看开头那张图里的问题,你加上 word-break: keep-all;word-wrap: break-word;正常就可以了。如有问题,欢迎讨论评论区或者直接私信。