word-wrap：
word-wrap的项有：
normal：默认，单词太长会超出容器宽度
break-word: 自动进行单词内断行，文本内容会在边界换行，长单词会断开换行。
把word-wrap配置成break-word后，有长单词的情况下，样式会好很多，不会出现超出容器宽度的问题，但是会发现浏览器在一个长单词在当前行放不下时，会先进行换行，后进行断词，这样会导致上面一行后面会空出一些，如下图：
这里this is 后面会空出很多，要解决这个问题，需要用到css3里面的word-break属性
word-break:
normal:使用浏览器默认的换行规则
break-all:允许单词内换行
keep-all:只能在半角空格或连字符处换行
将word-break设置成break-all后，如下：
可以看到this is后面的空白被补上了，所以用word-break不会做单词过长整体单词换行的处理。
扫一扫
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
