“word-break: break-all”和“word-wrap: break-word”的区别是什么?
当我两个都用的时候,如果它不适合容器,它们似乎就会破坏单词。但是为什么W3C制定了两种方法来实现呢?
“word-break: break-all”和“word-wrap: break-word”的区别是什么?
当我两个都用的时候,如果它不适合容器,它们似乎就会破坏单词。但是为什么W3C制定了两种方法来实现呢?
当前回答
讨论这些问题的W3规范似乎表明,word-break: break-all是为了要求CJK(中文、日语和韩语)文本具有特定的行为,而word-wrap: break-word是更一般的、不了解CJK的行为。
其他回答
break是指一个很长的单词从它应该开始的地方开始,并且可以按要求把它拆长:
[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live
inside this narrow paragr
aph.
然而,使用换行,一个很长的单词将不会从它应该开始的地方开始。
它自动换行到下一行,然后根据需要将其断行
[X] I am a text that
012345678901234567890123
4567890123456789 want to
live inside this narrow
paragraph.
除了前面的注释之外,浏览器对换行的支持似乎比换行好一些。
至少在Firefox (v24版本)和Chrome (v30版本)中,当应用到表元素中的内容时:
自动换行:break-word
实际上不会导致长单词换行,这会导致表超出其容器的边界;
单词分割:打破所有
将导致文字的包装,和表适合在其容器内。
jsfiddle演示。
这是一个巨大的区别。break-word只会破坏不符合容器的单词。而break-all会无情地试图最大限度地增加每行字符的数量,并会无情地导致“不必要的断句”,这看起来很可怕。
例子
这是一个来自旧杂志的文本,在一个6个字符宽的容器中使用单行字体。
使用word-break: break-all,大多数单词都被打破了,看起来无法阅读:
This i
s a te
xt fro
m an o
ld mag
azine
break-all所做的是一行一行地进行,在每行上放入六个字符,直到没有剩余。它会无情地这样做,即使是像“is”这样的两个字母的单词也可以分成两行。这看起来非常糟糕,我永远不会用它来渲染文本。
使用word-wrap: break-word,只有长单词会被打断:
This
is a
text
from
an old
magazi
ne
break-word的功能要好得多。它只会破坏无法装下容器宽度的单词。不能放入当前行的单词会被推到下一行。因此,在这种情况下,对于每行容纳6个字符的容器,它必须断开 一个8个字符的单词,比如“magazine”,但它永远不会变成一个更短的单词,比如“text”。
< span style="width: 10px;边框:纯黑色1px;字体类型:等宽字体;" > <h1 style=" font - family:宋体;"这是一本旧杂志上的一段文字 <人力资源> <h1 style=" font - family:宋体;"这是一本旧杂志上的一段文字 < / div
从各自的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;