用CSS3彻底解决长单词撑破容器的问题
当前位置:以往代写 > 网页教程 >用CSS3彻底解决长单词撑破容器的问题
2019-06-14

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

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

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

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

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

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

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

基础html代码

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

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

     效果如下图所示:

自动换行的效果

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

    关键字:

在线提交作业