为什么很难搞懂?看完了这篇文章后,你就知道原因了,同时也会彻底搞明白CSS用于控制文本的两个属性word-break和word-wrap的异同。
一、这样理解就记住了
【1、取值这样记】
word-break:normal(break-all)
word-wrap:normal(break-word)
可以看出,这两个属性分别有两个取值(其实还有些其它取值,出于目前兼容性问题,不列出来,免得干扰,可以了解),其中normal是都有的取值,其作用是默认效果,相当于就是不设置这个属性。不设置,可以不记normal,但是一定要知道不设置时,文本是怎么展示的,也就是说不设置时的效果是怎么样的,等会实例部分我会说。先记住不设置(默认)的状态是:
文本中连续英文字符不换行(不设置或者设置normal)
那么除去上面normal,其实每个属性都只要记住一个属性就行了。当设置这一个属性,对文本有什么样的控制作用了。实例部分我来讲,目前,一定要记住(所有浏览器都支持):
word-break:break-all
word-wrap:break-word
【2、区别这样记】
看上面代码,这两个属性长的非常相似,属性名都有个word,取值都有个break。同时它们的位置也都一样。在深一点观察,上一行代码有两个break,下一行代码有两个word。好了,这些都是表象。最主要相似点是它们的功能作用非常相似。
功能都是:让连续英文字符换行。
二、用实例进一步验证
【1、取值normal实例】
也就是不设置或者将两个属性设置为normal时的状态是:文本中连续英文字符不换行。
来看一下实际例子中的表现:
死死抓住概念定义,上面url没有折行,在一行显示,当过长的话,会超出容器展示,总之,不换行显示,同时,下面的good单词也是连续显示,并没有将这个单词拆分开来显示。所以默认文本中连续英文字符不换行就是这个意思。
【2、取值break-区别实例】
第一,设置word-break:break-all时的状态:所有都换行,一点空隙都不放过。
同样看两个地方,上面的url和下面的单词good。很明显都折行显示了。
第二,设置word-wrap:break-word时的状态:如果一行文字中有可以换行的地方(如空格,中文等),就不让英文单词/字符换行。
由上图可以看出,完整单词不会换行,每个单词间都有换行的空格符。而url长度由于超出容器宽度,在容器内没有可换行的地方,导致字符换行。这一点和不设置(或设置normal)的区别所在。同时,要注意中文和字符之间有一段可恶的留白部分。
现在可以明白了,不设置时,文本可以超出容器显示,而word-wrap:break-word控制在容器内显示。
总结一下:
为什么这两个属性很容易搞混。就像我说的,它们长的太相似,所以在CSS3中将word-wrap改成overflow-wrap。这样更有语义,助于理解,但出于兼容性问题,提醒慎用。
领取专属 10元无门槛券
私享最新 技术干货