word-break和word-wrap的区别是什么
本篇内容介绍了“word-break和word-wrap的区别是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
专注于为中小企业提供成都网站设计、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业黔西南州免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
首先我们来了解一下word-break这个属性,它的语法如下:
word-break: normal;
word-break: break-all;
word-break : keep-all;
它的属性值一共有3个,其中的几个属性值的含义具体解释如下:
normal:表示默认值,即默认的的换行规则。 break-all:表示强行换行,意思就是允许任意非文本间(比如网址类型的等)的单词断行。 keep-all: 也表示换行,但不允许文本中的单词换行,只能在半角空格或连字符处换行。
其中,在这三个属性值中,break-all这个属性值是所有浏览器都支持,但是 keep-all就不这样了,虽然有一定的发展和进步,但目前移动端还不适合使用word-break : keep-all。
好了,现在来说说另外一个主角——word-wrap来了,其语法如下:
word-wrap : normal;
word-wrap: break-word;
其中的几个属性值的含义具体解释如下: normal:就是默认值,就是正常的换行规则。 break-word:表示一行单词中实在没有其他靠谱的换行点的时候才进行换行。
其实大家会发现,word-break和word-wrap其实是长得比较像的,而且属性值也有类似之处,其实word-wrap属性也是很有故事的,它之前由于和 word-break长得太像,难免会让人记不住或搞混,所以在CSS3规范里,这个属性的名称被修改了,叫作 overflow-wrap。虽然这个新属性名称改了下,显得语义更准确,但也更容易区别和记忆。另外,在 Chrome和 Safari等WebKit内核的浏览器仅支持这个新属性。因此,虽然换了个好看好用的新名字,但是为了兼容性,目前还是乖乖地使用word-wrap 吧。
下面继续来唠唠这连个属性的到底有啥区别呢?word-break: break-all和 word-wrap: break-word。首先,两者长相神似,都有 word,都有break,位置都还一样,一个有两个break,一个有两个word;其次,两者的功能作用也类似,这两个声明都能使连续英文字符换行,那么它们的区别到底是什么? 下面给大家举个例子说明一下:dsdfsfdsfsf
代码展示1:
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: orange;
margin: 100px auto;
padding: 20px;
word-break: break-all;
}
代码展示2:
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: orange;
margin: 100px auto;
padding: 20px;
word-wrap: break-word;
}
“word-break和word-wrap的区别是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
当前文章:word-break和word-wrap的区别是什么
链接分享:http://pwwzsj.com/article/jpjpeg.html