“break- break-all”和“break- break-all”的区别是什么?与“word-wrap: break-word"在CSS中

我现在想知道这两者之间的区别是什么。当我使用这两个词时，如果它不适合容器，它们似乎就会破坏这个词。但是为什么W3C有两种方法来实现呢?

239590 次浏览
小开

我只能查到这些。不知道是否有用，但我觉得应该加进去。

自动换行

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

单词分割

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

小开
最佳答案

W3规范谈到了这些似乎表明word-break: break-all是用于要求CJK(中文、日语和韩语)文本的特定行为，而word-wrap: break-word是更一般的、不了解CJK的行为。

小开

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

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

word-break: break-all

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

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

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

小开

至少在Firefox(截至v24)和Chrome(截至v30)中，当应用于table元素中的内容时:

word-wrap:break-word

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

word-break:break-all

将的结果在单词包装，和表适合在它的容器。

enter image description here

jsfiddle演示。

小开
使用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.
小开

从各自的W3规范 -由于缺乏上下文而非常不清楚-可以推断出以下内容:

  • word-break: break-all用于将外国，非CJK(即西方)单词分解为CJK(中国，日本或韩国)字符书写。
  • word-wrap: break-word是非混合语言(让我们说纯西方语言)的分词。

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

下面的代码片段可以作为如何在跨浏览器环境中使用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-wrap的支持似乎比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;
}
<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被重命名为overflow-wrap可能是为了避免这种混淆。

现在我们得到的是:

overflow-wrap

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

可能的值:

  • normal:表示只能在正常的断行点断行。

  • break-word:表示如果行中没有其他可接受的断点，则通常不可破碎的单词可以在任意点断开。

源。

单词分割

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

  • 正常的:使用默认的换行规则。
  • 打破所有:对于非cjk(中文/日语/韩语)文本，可以在任意字符之间插入换行符。
  • 把所有: CJK文本不允许断句。非cjk文本的行为与正常文本相同。

源。

现在回到你的问题，overflow-wrap和单词分割之间的主要区别是，前者决定了溢出情况下的行为，而后者决定了正常的情况下的行为(无溢出)。当容器没有足够的空间来存放文本时，就会发生溢出情况。在这种情况下，断行没有任何帮助，因为没有空间(想象一个具有固定宽度和高度的盒子)。

所以:

  • overflow-wrap: break-word:在溢出的情况下，打断单词。
  • word-break: break-all:在正常情况下，只需要在行末换行。不需要溢出。
小开

有一个巨大的的区别。break-word将只分解不适合容器的单词。而break-all将无情地尝试最大每行字符的数量，并将无情地导致“不必要的断字”;看起来很可怕。

例子

在宽为6个字符的容器中以单行字体呈现字符串This is a text from an old magazine。

使用word-break: break-all，大多数单词都被破坏了，并且看起来不可redable:

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

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

在word-wrap: break-word中，只有较长的单词会被打破:

This
is a
text
from
an old
magazi
ne

break-word所做的要好得多。它只会破坏无法装下容器宽度的单词。不能放入当前行的单词会被推到下一行。因此，在这种情况下，如果容器每行能容纳6个字符它就必须分解一个8字符的单词，比如" magazine ";但它永远不会打断像“text”这样更短的单词。

<div style="width: 100px; border: solid 1px black; font-family: monospace;">
<h1 style="word-break: break-all;">This is a text from an old magazine</h1>
<hr>
<h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</div

小开

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

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

那么请记住，在这种情况下，一个"词;是其中没有空格的字符串。

< p >单词分割:打破所有; 优先减少空间浪费，同时避免溢出，在保持任何文字完整之前，所以它永远不会在任何地方，但在正确的边缘。它甚至在包含的文本中用空格替换换行符。如果你想尽可能避免滚动，并使用一个足够宽的容器来保证可读性，这是非常有用的:然而，如果你的容器太窄，结果通常不是很令人满意，正如Drkawashima所指出的 < p >自动换行/ overflow-wrap: break-word; 优先级保持任何和所有单词不间断，同时避免溢出，因此如果一个单词太长，无法放入该行的其余部分，它会先换行，并尝试将其余文本放入下一行，即使这意味着上面的行短至只有一个字符。如果你想要最大程度的可读性，同时尽可能避免滚动，并使用一个足够宽的容器，这是很有用的:否则你可能只想使用overflow: auto来代替

关于换行，它并没有真正被取代(也许在全球使用的浏览器中，它比溢出换行更被普遍认可):它成为溢出换行的别名，因为所有的大型浏览器和许多许多网页都已经采用了换行，尽管最初没有在标准中定义。然而，由于广泛的使用，当overflow-wrap被定义时，它并没有被丢弃，而是被定义为今天的别名，并且由于遗留的原因，ua(用户代理，例如web浏览器)必须将换行作为overflow-wrap属性的遗留名称别名。因此，它已经成为W3C事实上的标准，而且它不会很快消失(也许当W3C标准灭绝或整个网络被人工智能机器人普遍更新时)。

https://www.w3.org/TR/css-text-3/#overflow-wrap-property

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

小开

overflow-wrap: break-word;

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

小开

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

“word-break: break-all;”和“word-wrap: break-word;”

< p >单词分割:打破所有;它用于在任意字符处进行换行，以防止溢出。 自动换行:break-word;

.

.

.

提交答案