两者皆可实现断词的效果,看定义我是懵逼的,没办法,只能直接上demo
image.png样式定义如下
.test {
width: 300px;
height: 500px;
margin: 50px;
background: green;
float: left;
}
.wordBreak {
word-break: break-all;
}
.wordWrap {
word-wrap: break-word;
}
比较之后可以发现,如果不采用断词,会超出dom,这显然不是我们要的效果,word-wrap:break-word会单独起一行,如果单词一行显示不全,则新起一行,但是word-break:break-all,则很暴力,完全不浪费一点空间,只要到达了dom边界,直接断词,另外word-break还有一个属性break-word,这和word-wrap:break-word效果一致
网友评论