word-break:break-all和word-wrap:break-word的区别

快来打我* 2022-08-22 15:25 184阅读 0赞

最开始我们说了，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则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

[http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html][http_www.cnblogs.com_2050_archive_2012_08_10_2632256.html]  
[http://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wrap-break-word/][http_www.zhangxinxu.com_wordpress_2015_11_diff-word-break-break-all-word-wrap-break-word]  
[http://www.w3cplus.com/content/css3-word-wrap][http_www.w3cplus.com_content_css3-word-wrap]  
[http://www.w3cplus.com/content/css3-text-overflow][http_www.w3cplus.com_content_css3-text-overflow]

[http_www.cnblogs.com_2050_archive_2012_08_10_2632256.html]: http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html
[http_www.zhangxinxu.com_wordpress_2015_11_diff-word-break-break-all-word-wrap-break-word]: http://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wrap-break-word/
[http_www.w3cplus.com_content_css3-word-wrap]: http://www.w3cplus.com/content/css3-word-wrap
[http_www.w3cplus.com_content_css3-text-overflow]: http://www.w3cplus.com/content/css3-text-overflow