HTML属性word-break:break-all word-break:break-all和word-wrap:break-word的区别

word-break:break-all和word-wrap:break-word的区别
最开始我们说了,word-wrap 是用来决定允不允许单词内断句的,如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行,看看下一行的宽度够不够,不够的话就进行单词内的断句。

而word-break:break-all则更变态,因为它断句的方式非常粗暴,它不会尝试把长单词挪到下一行,而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的,那就是——用了word-break:break-all,就等于使用粗暴方式来断句了。总之一句话,如果您想更节省空间,那就用word-break:break-all就对了!

但无论如何,单词内的断句都会对西文的可读性产生一定的影响,有时候这点就要注意了。

ps:网上有些文章说,word-wrap:break-word 对长串英文不起作用,其实这是非常错误的,word-wrap:break-word照样能把一个长串英文或数字拆成多行。事实上,word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句,不同点是word-wrap:break-word会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;而word-break:break-all则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

最开始我们说了,word-wrap 是用来决定允不允许单词内断句的,如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行,

看看下一行的宽度够不够,不够的话就进行单词内的断句。而word-break:break-all则更变态,因为它断句的方式非常粗暴,它不会尝试把长单词

挪到下一行,而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的,那就是——用了word-break:break-all,就

等于使用粗暴方式来断句了。总之一句话,如果您想更节省空间,那就用word-break:break-all就对了!但无论如何,单词内的断句都会对西文的

可读性产生一定的影响,有时候这点就要注意了。ps:网上有些文章说,word-wrap:break-word 对长串英文不起作用,其实这是非常错误的,

word-wrap:break-word照样能把一个长串英文或数字拆成多行。事实上,word-wrap:break-word与word-break:break-all共同点是都能把长单词

强行断句,不同点是word-wrap:break-word会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;

而word-break:break-all则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。

猜你喜欢

转载自blog.csdn.net/lhx_ldm/article/details/80509324