用CSS3彻底解决长单词撑破容器的问题

作者:课课家教育更新于： 2016-09-20 15:39:53

　　在网页编辑带英文的文章时，你是否遇到过长单词撑破容器的问题？这是一个非常让人头疼的问题，对于带英文的文章来说，这种问题真的太常见了。

　　虽然早在css1时代，微软的IE浏览器就可以通过word-break:break-all这样的样式来解决此问题，但当时其它浏览器厂商都比较排斥微软，所以迟迟未被w3c标准收录。

　　如今的w3c标准终于认可了这一属性，并把它作为新功能定义到CSS3里面，并且赋予了它一个新的名字——word-wrap，它包含两个值：normal（默认）和break-word。

　　我们来看看基础的html代码：

　　运行,我们就会发现那个长单词越界了，跟本文开头给出的效果一样。

     这时我们把word-wrap的属性值normal改成break-word，则容器就不再被撑破了。

     效果如下图所示：

　　所谓“兄弟同心，其利断金”，如果w3c早点拿更好标准出来约束各大浏览器厂商，让它们早点达成共识，那浏览器之间的差异就可以少很多，Web开发者的工作效率也将因此得到有效提升，Web行业的发展也将更加迅猛，大家说是不是？