欢迎来到培训无忧网!

全国切换

咨询热线 400-001-5729

位置:培训无忧网 > 新闻资讯 > 电脑/IT > web前端 >  web前端:CSS3中word-break和word-wra

web前端:CSS3中word-break和word-wra

来源:培训无忧网-星星 发布人:星星

2021-11-30 16:02:59|已浏览:246次

CSS3中word-break和word-wrap有什么区别?

word-break

      word-break它的属性值一共有3个,其中的几个属性值的含义具体解释如下:
      normal:表示默认值,即默认的的换行规则。 break-all:表示强行换行,意思就是允许任意非文本间(比如网址类型的等)的单词断行。 keep-all: 也表示换行,但不允许文本中的单词换行,只能在半角空格或连字符处换行。
       其中,在这三个属性值中,break-all这个属性值是所有浏览器都支持,但是 keep-all就不这样了,虽然有一定的发展和进步,但目前移动端还不适合使用word-break : keep-all。
word-wrap
      它有两个属性值,其中的几个属性值的含义具体解释如下: normal:就是默认值,就是正常的换行规则。 break-word:表示一行单词中实在没有其他靠谱的换行点的时候才进行换行。

      其实大家会发现,word-break和word-wrap其实是长得比较像的,而且属性值也有类似之处,其实word-wrap属性也是很有故事的,它之前由于和 word-break长得太像,难免会让人记不住或搞混,所以在CSS3规范里,这个属性的名称被修改了,叫作 overflow-wrap。虽然这个新属性名称改了下,显得语义更准确,但也更容易区别和记忆。另外,在 Chrome和 Safari等WebKit内核的浏览器仅支持这个新属性。因此,虽然换了个好看好用的新名字,但是为了兼容性,目前还是乖乖地使用word-wrap 吧。

       本文由培训无忧网千锋教育课程顾问老师整理发布,更多网页制作培训课程信息可关注培训无忧网web前端培训频道或添加老师微信:15033336050

      注:尊重原创文章,转载请注明出处和链接 https://www.pxwy.cn/news-id-5648.html 违者必究!部分文章来源于网络由培训无忧网编辑部人员整理发布,内容真实性请自行核实或联系我们,了解更多相关资讯请关注break和word频道查看更多,了解相关专业课程信息您可在线咨询也可免费申请试课。关注官方微信了解更多:150 3333 6050

留下你的信息,课程顾问老师会一对一帮助你规划更适合你的专业课程!
  • 姓名:

  • 手机:

  • 地区:

  • 想学什么:

  • 培训无忧网
免 费 申 请 试 听
提交申请,《培训无忧网》课程顾问老师会一对一帮助你规划更适合你的专业课程!