word-break、word-wrap、word-space、white-space对比图

这几个属性不常用,而且名字看起来很相近,所以列出来,对比起来看看。然后不看不知道,一看吓一跳,真的是有点复杂,还涉及到非中文和非英文的情况,而且其中前两者还是CSS 3的属性,怪不得这么细化。下面的表格翻译自W3,假如翻译有不恰当的地方还请指出。

名称 word-break word-wrap
/overflow-wrap
word-spacing white-space
C
S
S
版本
CSS3 CSS3 CSS1 CSS1

定义

This property specifies soft wrap opportunities between letters

The word-wrap property allows long words to be able to be broken and wrap onto the next line.

The word-spacing property increases or decreases the white space between words.

 

The white-space property specifies how white-space inside an element is handled.

定义断词的方式。 对长单词,转行到下一行的方式,只在white-space允许折行的时候起效。 增加或减少
单词间的间距。
元素内的空白符的处理方式。
可取的值

normal:默认值

break-all:允许折行任意单词,Chrome和FF下,中文里面会允许标点符号折行到下一行的开头。

keep-all:不断词。

normal:默认值。约等于word-break: keep-all;

break-word:使单词可以被折行。

normal:默认值,相当于值是0;

length:使用px, pt, cm, em等单位具体定义,值可为负;

inherit:继承

normal:默认值,多个空白符显示为一个,自动折行。
nowrap:多个空白字符显示为一个,文字不自动折行,除非遇到<br />标签。
pre:空白字符被保留,就像<pre>标签一样,文本不自动折行。
pre-line:多个空白字符显示为一个,文本正常折行,换行符被保留。
pre-wrap:空白字符被保留,文本正常换行,换行符被保留。
inherit:继承

额外说明

这个有点复杂,涉及到多种语言的知识。貌似韩文是两个字一个词?

word-wrap和overflow-wrap是同一个意思,不过前者是后者的遗留名字,后者是更新的叫法。

当遇到很长的单词,比如肌联蛋白的IUPAC名的时候,overflow-wrap设置为break-word就能够自动折行了;不然屏幕就只有一行啦,慢慢拉水平滚动条吧。

当为负值的时候,只在IE7以下和FF有效,表现为单词挤在一块儿了。

这个属性说的是
单词,其实就是指定空白符的宽度。因为单词也是通过空格来隔开嘛,不然CSS怎么知道是单词还是字母。

对应
字符间距调整的属性是letter-spacing。

这个估计是最复杂的一个了,各个属性值绕来绕去的。

用的最多的时候可能就是用它的nowrap了吧。

上面的word-break有点抽象,因为涉及到其它的语言,下面补充一下断词的方法,下面的例子使用‘·’来定义断词点。

word-break: normal
这·是·一·些·汉·字,·and·some·Latin,·و·کمی·نوشتنن·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย.

word-break: break-all
这·是·一·些·汉·字,·a·n·d·s·o·m·e·L·a·t·i·n,·و·ﮐ·ﻤ·ﻰ·ﻧ·ﻮ·ﺷ·ﺘ·ﻦ·ﻋ·ﺮ·ﺑ·ﻰ,·แ·ล·ะ·ตั·ว·อ·ย่·า·ง·ก·า·ร·เ·ขี·ย·น·ภ·า·ษ·า·ไ·ท·ย.

word-break: keep-all
这是一些汉字,·and·some·Latin,·و·کمی·نوشتنن·عربی,·และตัวอย่างการเขียนภาษาไทย.



终于大体上翻译结束,不过肯定还有需要补充的,后面再加上。自己也在这次翻译当中明白了不少,但是对于CSS 3的其余相关属性,我还不是很清楚,比如line-break,以后遇到了再补充吧。

标签: 区别, word-break, bord-wrap, word-space, white-space

添加新评论