企业制作英文网站单词自动换行处理方案

最近在做一个英文外贸网站的时候，总是在处理单词换行的时候，会出现单词被断开换行的情形，搞得客户总觉得网站不专业，不好看；

只能不断寻找解决问题的办法，终于在CSS3中，我们找到可以使用word-wrap或word-break来定义长单词或URL地址是否换行到下一行。

说明：

word-wrap属性只有2个取值，如下表所示。

word-break属性有3个取值，如下表所示。

一般情况下，我们只会用到word-wrap:break-word;或word-break:break-all这两个来实现强制换行，其他属性值不需要去了解。

word-wrap:break-word;和word-break:break-all这两个长得跟亲兄弟一样，功能又非常相似，相信至今还是有很多人分不清两者的区别，甚至包括从事前端开发工作多年的小伙伴。想要了解两者的区别，我们先来看一个简单的例子。

word-wrap:break-word;是用来决定是否允许单词内断句的。如果不允许的话，长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话再进行单词内的断句。

word-break:break-all则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接就进行单词内的断句。

在线测试：http://www.lvyestudy.com/code/?articleId=444&order=1