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

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


当前回答

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

其他回答

从各自的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;

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

自动换行

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

单词分割

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

单词分割:打破所有:

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

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

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

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

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

单词分割:打破所有

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

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

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