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

转载 2016年06月01日 17:07:16
最开始我们说了,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.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-text-overflow

相关文章推荐

div自动换行word-break:break-all和word-wrap:break-word的区别

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。 它们的区别就在于: 1,word-break:break-all 例如di...

【css】你了解word-wrap和word-break的区别吗?

word-wrap: css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 word-break: c...

CSS中word-wrap与word-break的区别

兼容IE 和FF 的换行CSS样式 最好的方式是 以下为引用内容:  word-wrap:break-word; overflow:hidden; 而不是 以下为引用内容:  word-wra...

white-spacing,word-break,word-wrap的区别

今天工作中遇到了需要让汉字和英文词汇均不换行的需求,同时需要考虑兼容性问题,除了white-space:nowrap或者pre。顺带将所有相关的知识补了一下。首先是white-space,在没有设定w...

word-break和word-wrap的区别

在日常工作当中,我们应该都遇到过英文单词很长,就算超过了div的边界都不换行的问题,于是我们经常会去写word-break:break-all;word-wrap:break-word这两个样式来强制...

word-break和word-wrap的区别

转载自:无双 你真的了解word-wrap和word-break的区别吗? 这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-b...

word-wrap和word-break的区别

原文地址:http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html

word_wrap、word_break和text-overflow的区别

word_wrap、word_break和text-overflow;css;前端

word-wrap,word-break,white-space,text-overflow的区别和用法

汉字和字符在一起显示时 汉字和字符会出现错行的情况 如图片所示 此篇文章 可以很好的解释这个问题 但目前火狐似乎无效 进一步研究中......

使用CSS确定HTML中的断句格式——你真的了解word-wrap和word-break的区别吗

你真的了解word-wrap和word-break的区别吗? 这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:bre...
  • r5014
  • r5014
  • 2017-06-08 10:03
  • 142
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)