为什么很难搞懂文本控制属性word-break和word-wrap的异同

  • 时间:2018-08-02 22:10 作者:小郑搞码事 来源:小郑搞码事 阅读:215
  • 扫一扫,手机访问
摘要:点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!为什么很难搞懂?看完了这篇文章后,你就知道起因了,同时也会彻底搞明白CSS使用于控制文本的两个属性word-break和word-wrap的异同。一、这样了解就记住了【1、取值这样记】word-break:normal(break

点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

为什么很难搞懂?看完了这篇文章后,你就知道起因了,同时也会彻底搞明白CSS使用于控制文本的两个属性word-breakword-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时的状态是:文本中连续英文字符不换行

来看一下实际例子中的体现:

为什么很难搞懂文本控制属性word-break和word-wrap的异同

死死抓住概念定义,上面url没有折行,在一行显示,当过长的话,会超出容器展现,总之,不换行显示,同时,下面的good单词也是连续显示,并没有将这个单词拆分开来显示。所以默认文本中连续英文字符不换行就是这个意思。

【2、取值break-区别实例】

第一,设置word-break:break-all时的状态:所有都换行,一点空隙都不放过

为什么很难搞懂文本控制属性word-break和word-wrap的异同

同样看两个地方,上面的url和下面的单词good。很显著都折行显示了。

第二,设置word-wrap:break-word时的状态:假如一行文字中有可以换行的地方(如空格,中文等),就不让英文单词/字符换行

为什么很难搞懂文本控制属性word-break和word-wrap的异同

由上图可以看出,完整单词不会换行,每个单词间都有换行的空格符。而url长度因为超出容器宽度,在容器内没有可换行的地方,导致字符换行。这一点和不设置(或者设置normal)的区别所在。同时,要注意中文和字符之间有一段可恶的留白部分。

现在可以明白了,不设置时,文本可以超出容器显示,而word-wrap:break-word控制在容器内显示。

总结一下:

为什么这两个属性很容易搞混。就像我说的,它们长的太类似,所以在CSS3中将word-wrap改成overflow-wrap。这样更有语义,助于了解,但出于兼容性问题,提示慎使用。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
【系统环境|服务器应用】第10题- 你不知道的delete操作符(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部