“word-break: break-all”和“word-wrap: break-word”的区别是什么?

当我两个都用的时候,如果它不适合容器,它们似乎就会破坏单词。但是为什么W3C制定了两种方法来实现呢?


我只能查到这些。我不确定它是否有帮助,但我想我应该把它加入到混合中。

自动换行

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

单词分割

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


讨论这些问题的W3规范似乎表明,word-break: break-all是为了要求CJK(中文、日语和韩语)文本具有特定的行为,而word-wrap: break-word是更一般的、不了解CJK的行为。


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

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

单词分割:打破所有

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

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

如果无所谓的话,随便选一个。


至少在Firefox (v24版本)和Chrome (v30版本)中,当应用到表元素中的内容时:

自动换行:break-word

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

单词分割:打破所有

将导致文字的包装,和表适合在其容器内。

jsfiddle演示。


break是指一个很长的单词从它应该开始的地方开始,并且可以按要求把它拆长:

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

然而,使用换行,一个很长的单词将不会从它应该开始的地方开始。

它自动换行到下一行,然后根据需要将其断行

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

从各自的W3C规范(由于缺乏上下文,这些规范非常不清楚)可以推断出以下内容:

break-all: break-all用于将CJK(中文、日语或韩语)文字中的外来词、非CJK(即西方)词拆分。 break-word是在非混合语言(让我们说纯西方语言)中进行分词。

至少,这是W3C的意图。实际发生的是浏览器不兼容的结果。这里有一篇关于所涉及的各种问题的优秀文章。

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

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

 /* Nonstandard for WebKit */
 word-break: break-word;

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

除了前面的注释之外,浏览器对换行的支持似乎比换行好一些。


单词分割:打破所有:

字是继续到边界,然后在换行。

自动换行: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>


换行被重命名为溢出换行可能是为了避免这种混淆。

现在我们得到的是:

overflow-wrap

overflow-wrap属性用于指定浏览器是否可以在单词中断行,以防止当一个不可分割的字符串太长而无法放入其包含框时出现溢出。

可能的值:

normal:表示行只能在正常的字断行点处断行。 break-word:表示如果行中没有其他可接受的断点,通常不可分割的单词可以在任意点上被分割。

源。

单词分割

换行CSS属性用于指定是否在单词中换行。

normal:使用默认的换行规则。 break-all:对于非cjk(中文/日语/韩语)文本,可以在任意字符之间插入换行符。 keep-all:在CJK文本中不允许换字。非cjk文本的行为与正常文本相同。

源。


现在回到你的问题。溢位自动换行和断字之间的主要区别在于,前者决定溢位情况下的行为,而后者决定正常情况下(无溢位)的行为。当容器没有足够的空间来容纳文本时,就会发生溢出情况。在这种情况下,断行没有任何帮助,因为没有空间(想象一个具有固定宽度和高度的盒子)。

So:

overflow-wrap: break-word:在溢出的情况下,将字打散。 break-all:在正常情况下,只需要在行末断行即可。不需要溢出。


这是一个巨大的区别。break-word只会破坏不符合容器的单词。而break-all会无情地试图最大限度地增加每行字符的数量,并会无情地导致“不必要的断句”,这看起来很可怕。

例子

这是一个来自旧杂志的文本,在一个6个字符宽的容器中使用单行字体。

使用word-break: break-all,大多数单词都被打破了,看起来无法阅读:

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

break-all所做的是一行一行地进行,在每行上放入六个字符,直到没有剩余。它会无情地这样做,即使是像“is”这样的两个字母的单词也可以分成两行。这看起来非常糟糕,我永远不会用它来渲染文本。

使用word-wrap: break-word,只有长单词会被打断:

This
is a
text
from
an old
magazi
ne

break-word的功能要好得多。它只会破坏无法装下容器宽度的单词。不能放入当前行的单词会被推到下一行。因此,在这种情况下,对于每行容纳6个字符的容器,它必须断开 一个8个字符的单词,比如“magazine”,但它永远不会变成一个更短的单词,比如“text”。

< span style="width: 10px;边框:纯黑色1px;字体类型:等宽字体;" > <h1 style=" font - family:宋体;"这是一本旧杂志上的一段文字 <人力资源> <h1 style=" font - family:宋体;"这是一本旧杂志上的一段文字 < / div


单看断字和换行的定义就很容易让你头晕目眩,但当比较这两个词时,更容易这样想:

首先,你可能会使用overflow: auto;同样,您可能想要尝试单独使用它是什么样子:如果您可以容忍需要在容器中滚动文本而不是任意换行位置,那么它可能正是您所需要的。

然后请记住,在这个上下文中,“word”是一个没有空格的字符串。

单词分割:打破所有;

优先减少空间浪费,同时避免溢出,在保持任何文字完整之前,所以它永远不会在任何地方,但在正确的边缘。它甚至在包含的文本中用空格替换换行符。如果你想尽量避免滚动,并使用一个足够宽的容器来提高可读性,这是很有用的:然而,如果你的容器太窄,结果通常不是很令人满意,正如Drkawashima指出的那样。

自动换行/ overflow-wrap: break-word;

优先级保持任何和所有单词不间断,同时避免溢出,因此如果一个单词太长,无法放入该行的其余部分,它会先换行,并尝试将其余文本放入下一行,即使这意味着上面的行短至只有一个字符。如果你想要最大限度的可读性,同时尽可能避免滚动,并使用一个足够宽的容器,这是很有用的:否则你可能只想使用overflow: auto来代替。

关于换行,它并没有真正被取代(也许在全球使用的浏览器中,它比溢出换行更被普遍认可):它成为溢出换行的别名,因为所有的大型浏览器和许多许多网页都已经采用了换行,尽管最初没有在标准中定义。

然而,由于广泛使用,在定义overflow-wrap时它并没有被丢弃,而是定义为今天的别名,并且由于遗留原因,ua(用户代理,例如web浏览器)必须将换行作为overflow-wrap属性的遗留名称别名。因此,它已经成为W3C事实上的标准,而且它不会很快消失(也许当W3C标准灭绝或整个网络被人工智能机器人普遍更新时)。

5.5. Overflow -wrap/word-wrap属性

overflow-wrap (MDN)


overflow-wrap: break-word;

参考

overflow-wrap (MDN)


CSS中的分词属性用于指定当一个单词到达一行末尾时应该如何分词或分词。换行属性用于拆分/换行较长的单词并将它们换行到下一行。

“word-break: break-all;”和“word-wrap: break-word;”的区别:

word-break: break-all;:用于在任意字符处进行换行,防止字符溢出。

word-wrap: break-word;:用于在任意点打断单词,以防止溢出。