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不会做单词过长整体单词换行的处理。