这几个属性不常用,而且名字看起来很相近,所以列出来,对比起来看看。然后不看不知道,一看吓一跳,真的是有点复杂,还涉及到非中文和非英文的情况,而且其中前两者还是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:默认值,多个空白符显示为一个,自动折行。
|
额外说明 | 这个有点复杂,涉及到多种语言的知识。貌似韩文是两个字一个词? | 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,·و·کمی·نوشتنن·عربی,·และตัวอย่างการเขียนภาษาไทย.