CSS中的“word-break:break all”和“word-wrap:break-word”有什么区别?

The W3 specification that talks about these 似乎在暗示 word-break: break-all 用于要求使用CJK(中文、日文和韩文)文本的特定行为,而 word-wrap: break-word 是比较一般,非CJK意识,行为。

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

• 将长单词包装到下一行。
• 调整不同的单词,使它们不会在中间中断。

word-break: break-all

• 不管它是一个连续单词还是多个单词,都会在宽度限制的边缘将其分解。(即即使在同一单词的字符内)

因此,如果您有许多动态获取内容的固定大小跨度,那么您可能更喜欢使用 自动换行:换行 ,因为只有连续的单词在中间被打断,如果它是一个包含许多单词的句子,那么空间将被调整为完整的单词(单词中没有中断)。

如果这无关紧要的话,你也可以选择。

用 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.

当应用于 table 元素:

word-wrap:break-word

不会实际导致长单词换行,这会导致表超出其容器的边界;

word-break:break-all

将 结果是单词包装,并且表适合其容器。

jsfiddle demo .

word-wrap 已重命名为 overflow-wrap 可能是为了避免这种混乱。

现在我们有了:

溢出包装

这个 溢出包装 属性用于指定浏览器是否可以在字内换行,以防止在其他不可断字符串太长而无法放入其包含框时溢出。

可能值:

• 正常的 :表示行只能在正常分词点中断。

• 破字 :表示如果行中没有其他可接受的断点,则通常无法断开的单词可能在任意点断开。

source .

单词中断

这个 单词中断 css属性用于指定是否在单词中换行。

• 正常的 :使用默认换行规则。
• 打破一切 :对于非CJK(中文/日文/韩文)文本,可以在任何字符之间插入分词。
• 保持一切 :不允许对CJK文本使用分词。非CJK文字行为与正常相同。

source .

现在回到你的问题,主要区别在于 溢出包装 和 单词中断 是第一个决定 溢流 情境,而后者决定了 正常的 情况(无溢出)。安 溢流 当容器没有足够的空间容纳文本时,就会发生这种情况。在这种情况下断线没有帮助,因为没有空间(想象一个有固定宽度和高度的盒子)。

所以:

• overflow-wrap: break-word :在溢出情况下,请打断这些词。
• word-break: break-all :在正常情况下,只需在行尾打断单词即可。不需要溢出。

这就是我能找到的全部。不确定是否有用,但我想我会把它加入到混合物中。

字包

此属性指定当内容超出元素的指定呈现框的边界时,当前呈现的行是否应中断(这在某些方面与意向中的__clip_和__overflow_属性相似)。此属性仅在元素具有可视呈现、是内联元素WI时适用。这个显式的高度/宽度是绝对定位的,并且/或者是一个块元素。

断字

此属性控制单词中的换行行为。它在一个元素中使用多种语言的情况下特别有用。

从各自的 W3 specifications ____

• word-break: break-all 是用来分解外、非CJK(说西)字中的CJK(中、日、韩)字。
• word-wrap: break-word 是一种非混合语言的破译。

至少,这是W3的意图。实际发生的是浏览器不兼容的一个重大错误。这里是 an excellent write-up of the various problems involved .

下面的代码片段可以作为如何在跨浏览器环境中使用CSS实现换行的摘要:

-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;

word-break:break-all :

Word继续边框,然后换行。

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;  
}

<b>word-break:break-all</b>

<div class="break-all">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

<b> word-wrap:break-word</b>

<div class="break-word">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

除了以前的注释浏览器支持 word-wrap 似乎比 word-break .