使用word-wrap和word-break让网页中长英文字符串自动换行

在制作网页或为网站添加内容时，我们可能遇到这种情况，当较长的英文字符串或数字字符串不会自动换行，从而撑破块的宽度，这样使得文档的布局显得非常凌乱，本文将会告诉你解决此类问题的方法。

实际上，在我们进行维护网页时，当输入的内容达到块的宽度时，汉字可以很好地自动进行换行，而数字和英文字符不行，这主要是为了保持数字和英文串的完整性，但这会撑破块的宽度，从而造成网页布局非常难看，解决的方法就是借助样式表中的word-wrap和word-break属性。下面将介绍一下这两个属性：

（1）word-wrap用来控制换行：

其取值有两种：normal和break-word

break-word用来强制换行，内容将在块的边界内换行，中文不会出现任何问题，英文语句也没问题。但是对于长串的英文，不会起任何作用。

（2）word-break用来控制断词：

其取值有三种情况：normal，break-all和keep-all。

break-all是强制断开单词。使用本值时，在单词到达块的边界时，下个字母自动到下一行。这个值就很好地解决了了长串英文的问题。

keep-all是指在中文（Chinese），日文（Japanese）和韩文（Korean）时不断词，一句话一行，使用此值可以用来排列古诗语句。

知道了让面这两个属性及取值情况，我们的问题就很好地解决了，我们在需要进行换行的块样式中加入以下两个样式即可：

word-wrap:break-word;
word-break:break-all;