html文本自动换行

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