CSS中“word-break：break-all”与“word-wrap：break-word”之间的区别是什么？-Java 学习之路

317

我目前想知道两者之间有什么区别 . 当我使用它们时，如果它不适合容器，它们似乎打破了这个词 . 但为什么W3C有两种方法呢？

9 回答

35

The W3 specification that talks about these似乎暗示 word-break: break-all 用于要求CJK（中文，日文和韩文）文本的特定行为，而 word-wrap: break-word 是更一般的，非CJK感知的行为 .

回复于 2024-04-20T12:57:55+08:00
335
word-wrap: break-word 最近更改为 overflow-wrap: break-word
- 将长单词包装到下一行 .
- 调整不同的单词，以便它们不会在中间中断 .
word-break: break-all
- 无论是连续的单词还是多个单词，都会在宽度限制的边缘将它们分开 . （即使在同一个词的字符内）
因此，如果您有许多固定大小的 Span 来动态获取内容，您可能只是更喜欢使用 word-wrap: break-word ，因为只有连续的单词在两者之间被打破，并且如果它是包含许多单词的句子，则调整空格以保持完整单词（一个词内没有中断） .

如果没关系，那就去吧 .
回复于 2024-04-20T12:57:55+08:00
27
对于 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.
```
回复于 2024-04-20T12:57:55+08:00
22

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

word-wrap:break-word

实际上不会导致长词包装，这可能导致表超出其容器的界限;

word-break:break-all

将导致单词换行，并且表格适合其容器 .

jsfiddle demo .

回复于 2024-04-20T12:57:55+08:00
8
word-wrap 已被重命名为 overflow-wrap 可能是为了避免这种混淆 .

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

溢出包装

overflow-wrap属性用于指定浏览器是否可以在单词中断行，以防止在其他不可破解的字符串太长而无法容纳其包含框时溢出 .

可能的值：
- normal ：表示行只能在正常的断点处中断 .
- break-word ：表示如果行中没有其他可接受的断点，通常不可破坏的单词可能会在任意点被破坏 .
source .

分词

word-break CSS属性用于指定是否在单词中断行 .
- normal ：使用默认换行符规则 .
- break-all ：可以在非CJK（中文/日文/韩文）文本的任何字符之间插入分词符 .
- keep-all ：不允许CJK文本的分词 . 非CJK文本行为与正常情况相同 .
source .

现在回到你的问题， overflow-wrap 和 word-break 之间的主要区别在于，第一个确定溢出情况下的行为，而后者确定正常情况下的行为（无溢出） . 当容器没有帮助时会发生溢出情况，因为没有空间（想象一个具有固定宽度和高度的盒子） .

所以：
- overflow-wrap: break-word ：在溢出的情况下，打破这些话 .
- word-break: break-all ：在正常情况下，只需打破行尾的单词即可 . 不需要溢出 .
回复于 2024-04-20T12:57:55+08:00
1

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

WORD-WRAP

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

WORD-BREAK

此属性控制单词中的换行行为 . 在元素中使用多种语言的情况下，它尤其有用 .

回复于 2024-04-20T12:57:55+08:00
180
从相应的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;
```
回复于 2024-04-20T12:57:55+08:00

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>

回复于 2024-04-20T12:57:55+08:00

6

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

回复于 2024-04-20T12:57:55+08:00

CSS中“word-break：break-all”与“word-wrap：break-word”之间的区别是什么？

9 回答

溢出包装

分词

相关问题