CSS中的“断字:全部”和“换行:断字”之间有什么区别

CSS

Sam小哥Tom

2020-03-19

我目前想知道两者之间有什么区别。当我使用两者时,如果它不适合容器,它们似乎会打乱这个词。但是,为什么W3C有两种方法呢?

第2419篇《CSS中的“断字:全部”和“换行:断字”之间有什么区别》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
乐米亚 2020.03.19

除了前面的注释,浏览器对的支持word-wrap似乎要好于word-break

梅凯 2020.03.19

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

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

word-break: break-all

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

如您所见,结果非常糟糕。break-all会尝试将尽可能多的字符放入每行中,甚至会将“ is”之类的2个字母单词分成两行!太荒谬了 这就是为什么 break-all很少使用。

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-word只会破坏太长而无法容纳容器的单词(例如“ magazine”,即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

蛋蛋Itachi 2020.03.19

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>

理查德古一 2020.03.19

从各自的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;
宝儿AA 2020.03.19

这就是我能找到的全部。不确定是否有帮助,但以为我会将其添加到组合中。

换行

此属性指定如果内容超出元素的指定渲染框的边界,则当前渲染的行是否应中断(这在某些方面类似于intent的“ clip”和“ overflow”属性。)此属性仅应适用如果元素具有视觉效果,则是具有明确的高度/宽度的内联元素,是绝对定位的元素,并且/或者是块元素。

单词中断

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

JinJin梅 2020.03.19

至少在Firefox(从v24开始)和Chrome(从v30开始)中,当应用于table元素中的内容时:

word-wrap:break-word

实际上不会导致长字换行,这可能导致表超出其容器的范围;

word-break:break-all

导致自动换行,并使表格适合其容器。

在此处输入图片说明

jsfiddle演示

十三梅 2020.03.19

使用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.
宝儿小哥小卤蛋 2020.03.19

word-wrap: break-word recently changed to 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

  • 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).

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

AMandy前端 2020.03.19

讨论这些问题的W3规范似乎暗示word-break: break-all要求CJK(中文,日文和韩文)文本具有特定的行为,而这word-wrap: break-word是更普遍的,不支持CJK的行为。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android