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

What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS

提问by Nap

I am currently wondering what is the difference between the two. When I used both they seem to break the word if it is not fitting the container. But why did W3C made two ways to do it?

我目前想知道两者之间有什么区别。当我同时使用两者时，如果它不适合容器，它们似乎会打破这个词。但是为什么 W3C 制定了两种方法来做到这一点？

采纳答案by AakashM

The W3 specification that talks about theseseem to suggest that word-break: break-allis for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-wordis the more general, non-CJK-aware, behaviour.

讨论这些的 W3 规范似乎表明这word-break: break-all是为了要求使用 CJK（中文、日文和韩文）文本的特定行为，而是word-wrap: break-word更一般的、非 CJK 感知的行为。

回答by Bhumi Singhal

word-wrap: break-wordrecently changed to overflow-wrap: break-word

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

• will wrap long words onto the next line.
• adjusts different words so that they do not break in the middle.

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

word-break: break-all

word-break: break-all

• irrespective of whether it's a continuous word or many words, breaks them up at the edge of the width limit. (i.e. even within the characters of the same word)

• 无论是连续单词还是多个单词，都在宽度限制的边缘将它们分解。（即即使在同一个单词的字符内）

So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word, as that way only the continuous words are broken in between, and in case it's a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).

因此，如果您有许多动态获取内容的固定大小的跨度，您可能更喜欢使用word-wrap: break-word，因为这样只会将连续的单词断开，并且如果它是包含多个单词的句子，则会调整空格以获得完整的单词（一言不发）。

And if it doesn't matter, go for either.

如果没关系，那就去吧。

回答by shuky

With word-break, a very long word starts at the point it should start and it is being broken as long as required

随着word-break，在点一个很长的单词开始就应该开始，它正在被打破，只要需要

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

However, with word-wrap, a very long word WILL NOT start at the point it should start. it wrap to next line and then being broken as long as required

但是，对于word-wrap，一个很长的词不会从它应该开始的地方开始。它包装到下一行，然后根据需要被打破

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

回答by André Pena

word-wraphas been renamed to overflow-wrapprobably to avoid this confusion.

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

Now this is what we have:

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

overflow-wrap

溢出包装

The overflow-wrapproperty is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

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

Possible values:

可能的值：

• normal: Indicates that lines may only break at normal word break points.

• break-word: Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

• normal：表示只能在正常的单词断点处换行。

• break-word：表示如果行中没有其他可接受的断点，通常无法破解的单词可能会在任意点被破坏。

source.

来源。

word-break

断字

The word-breakCSS property is used to specify whether to break lines within words.

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

• normal: Use the default line break rule.
• break-all: Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.
• keep-all: Don't allow word breaks for CJK text. Non-CJK text behavior is the same as for normal.

• normal：使用默认的换行规则。
• break-all：可以在非 CJK（中文/日文/韩文）文本的任何字符之间插入分词符。
• keep-all：不允许对 CJK 文本进行分词。非 CJK 文本行为与正常相同。

source.

来源。

---

---

Now back to your question, the main difference between overflow-wrapand word-breakis that the first determines the behavior on an overflowsituation, while the later determines the behavior on a normalsituation (no overflow). An overflowsituation happens when the container doesn't have enough space to hold the text. Breaking lines on this situation doesn't help because there's no space (imagine a box with fix width and height).

现在回到您的问题，overflow-wrap和word-break之间的主要区别在于第一个确定溢出情况下的行为，而后者确定正常情况下（无溢出）的行为。一个溢出的情况发生时，容器没有足够的空间来容纳文本。在这种情况下断线无济于事，因为没有空间（想象一个具有固定宽度和高度的框）。

So:

所以：

• overflow-wrap: break-word: On an overflow situation, break the words.
• word-break: break-all: On a normal situation, just break the words at the end of the line. An overflow is not necessary.

• overflow-wrap: break-word: 在溢出的情况下，打破单词。
• word-break: break-all: 在正常情况下，只需将行尾的单词打断即可。不需要溢出。

回答by Jon Schneider

At least in Firefox (as of v24) and Chrome (as of v30), when applied to content in a tableelement:

至少在 Firefox（自 v24）和 Chrome（自 v30）中，当应用于table元素中的内容时：

word-wrap:break-word

word-wrap:break-word

will not actually cause long words to wrap, which can result in the table exceeding the bounds of its container;

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

word-break:break-all

word-break:break-all

willresult in words wrapping, and the table fitting within its container.

将导致文字环绕，并将桌子放入其容器中。

jsfiddle demo.

jsfiddle 演示。

回答by Jonny Haynes

This is all i can find out. Not sure if it helps, but thought I'd add it to the mix.

这就是我所能找到的。不确定它是否有帮助，但我想我会把它添加到混合中。

WORD-WRAP

换行

This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip' and ‘overflow' properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

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

WORD-BREAK

断字

This property controls the line breaking behavior within words. It is especially useful in cases where multiple languages are used within an element.

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

回答by Drkawashima

There's a hugedifference. break-allis basically unusable for rendering readable text.

有很大的不同。break-all基本上无法用于呈现可读文本。

Let's say you've got the string This is a text from an old magazinein a container which only fits 6 chars per row.

假设您将字符串This is a text from an old magazine放在一个容器中，每行只能容纳 6 个字符。

word-break: break-all

word-break: break-all

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

As you can see the result is awful. break-allwill try to fit as many chararacters into each row as possible, it will even split a 2 letter word like "is" onto 2 rows! It's ridiculous. This is why break-allis rarely ever used.

如您所见，结果很糟糕。break-all将尝试将尽可能多的字符放入每一行，它甚至会将像“is”这样的 2 个字母的单词拆分为 2 行！这很荒谬。这就是为什么 break-all很少使用的原因。

word-wrap: break-word

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordwill only break words which are too long to ever fit the container (like "magazine", which is 8 chars, and the container only fits 6 chars). It will never break words that could fit the container in their entirety, instead it will push them to a new line.

break-word只会破坏太长而无法容纳容器的单词（例如“杂志”，它是 8 个字符，而容器只能容纳 6 个字符）。它永远不会破坏可以完全适合容器的单词，而是会将它们推到新的一行。

<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

回答by Ehsan

word-break:break-all:

word-break:break-all：

word to continue to border then break in newline.

word 继续边界然后换行。

word-wrap:break-word:

word-wrap:break-word：

At first , word wrap in newline then continue to border.

首先，换行换行然后继续边框。

Example :

例子 ：

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>

回答by Serge Stroobandt

From the respective W3 specifications—which happen to be pretty unclear due to a lack of context— one can deduce the following:

从各自的W3 规范（由于缺乏上下文而碰巧相当不清楚）可以推断出以下内容：

• word-break: break-allis for breaking up foreign, non-CJK (say Western) words in CJK (Chinese, Japanese or Korean) character writings.
• word-wrap: break-wordis for word breaking in a non-mixed (let us say solely Western) language.

• word-break: break-all用于分解 CJK（中文、日文或韩文）字符写作中的外国非 CJK（例如西方）单词。
• word-wrap: break-word用于以非混合（让我们说仅是西方）语言进行断字。

At least, these were W3's intentions. What actually happened was a major cock-up with browser incompatibilities as a result. Here is an excellent write-up of the various problems involved.

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

The following code snippet may serve as a summary of how to achieve word wrapping using CSS in a cross browser environment:

以下代码片段可以作为如何在跨浏览器环境中使用 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;

回答by user2619604

In addition to the previous comments browser support for word-wrapseems to be a bit better than for word-break.

除了前面的评论，浏览器对 for 的支持word-wrap似乎比 for 好一点word-break。