CSS中"word-break:break-all"与"word-wrap:break-word"之间的区别是什么？

我目前想知道两者之间有什么区别.当我使用它们时,如果它不适合容器,它们似乎打破了这个词.但为什么W3C有两种方法呢？

word-wrap: break-word 最近改为 overflow-wrap: break-word

将长单词包装到下一行.

调整不同的单词,使它们不会在中间突破.

word-break: break-all

无论是连续的单词还是多个单词,都要在宽度限制的边缘将它们分开.(即使在同一个词的字符内)

因此,如果你有许多固定大小的跨度来动态获取内容,你可能只是喜欢使用word-wrap: break-word,因为只有连续的单词在它们之间被打破,并且如果它是包含许多单词的句子,则调整空格以获得完整的单词(一句话内没有中断).

如果没关系,那就去吧.

谈论这些的W3规范似乎暗示word-break: break-all要求使用CJK(中文,日文和韩文)文本的特定行为,而word-wrap: break-word更普遍的,非CJK感知的行为.

随着word-break,一个很长的词开始于它应该开始的点,并且只要需要它就会被打破

[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live 
inside this narrow paragr
aph.

然而,有word-wrap一个很长的词不会从应该开始的那一刻开始.它包裹到下一行,然后在需要时被打破

[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.

至少在Firefox(自v24起)和Chrome(截至第30版)中,当应用于table元素中的内容时:

word-wrap:break-word

实际上不会导致长词包装,这可能导致表超出其容器的界限;

word-break:break-all

将导致单词换行,并且表格适合其容器.

jsfiddle演示.

word-wrap已被重命名为overflow-wrap可能避免这种混乱.

现在这就是我们所拥有的:

溢出包装

所述溢流缠绕属性用来指定浏览器是否可能破裂字线内,以防止溢出当否则牢不可破字符串太长,以适应其容纳箱.

可能的值:

normal:表示行只能在正常的断点处中断.

break-word:表示如果行中没有其他可接受的断点,通常不可破坏的单词可能会在任意点被破坏.

来源.

字断

该字断 CSS属性用于指定是否断词内行.

normal:使用默认换行符规则.

break-all:可以在非CJK(中文/日文/韩文)文本的任何字符之间插入单词分隔符.

keep-all:不允许CJK文本的分词.非CJK文本行为与正常情况相同.

来源.

现在回到你的问题,overflow-wrap和word-break之间的主要区别在于,第一个确定溢出情况下的行为,而后者确定正常情况下的行为(无溢出).一个溢出的情况发生时,容器没有足够的空间来容纳文本.在这种情况下断线并没有帮助,因为没有空间(想象一个具有固定宽度和高度的盒子).

所以:

overflow-wrap: break-word:在溢出的情况下,打破这些话.

word-break: break-all:在正常情况下,只需打破行尾的单词即可.不需要溢出.

这是我能找到的全部.不确定它是否有帮助,但我想我会把它添加到混合中.

WORD-WRAP

此属性指定当内容超出元素的指定呈现框的边界时当前呈现的行是否应该中断(这在某些方面类似于intent中的'clip'和'overflow'属性.)此属性应仅适用如果元素具有可视化渲染,则是具有显式高度/宽度的内联元素,绝对定位和/或是块元素.

WORD-BREAK

此属性控制单词中的换行行为.在元素中使用多种语言的情况下,它尤其有用.

word-break:break-all :

单词继续边界然后在换行符中断.

word-wrap:break-word :

首先,换行中的自动换行然后继续边界.

示例:

div {
   border: 1px solid red;
   width: 200px;
}

span {
  background-color: yellow;
}

.break-all {
  word-break:break-all;
 }
.break-word {
  word-wrap:break-word;  
}

word-break:break-all


  This text is styled with
  soooooooooooooooooooooooooome of the text
  formatting properties.


 word-wrap:break-word


  This text is styled with
  soooooooooooooooooooooooooome of the text
  formatting properties.

-ms-word-break: break-all;
 word-break: break-all;

 /* Non standard for webkit */
 word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

This i
s a te
xt fro
m an o
ld mag
azine

This
is a
text
from
an old
magazi
ne

This i
s a te
xt fro
m an o
ld mag
azine