这几个属性不常用,而且名字看起来很相近,所以列出来,对比起来看看。然后不看不知道,一看吓一跳,真的是有点复杂,还涉及到非中文和非英文的情况,而且其中前两者还是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,以后遇到了再补充吧。