Css权威指南(4th，第四版中文翻译)-6.文本属性

文本和之前说的字体有什么区别呢？文本本身是内容，而字体就是用来显示这个内容的。借助text的一系列属性，可以修改文本的位置，添加下划线，改变大小写等等。

缩进和内联对齐

要放在以前，有些网站为了实现段落开头的空格，会将空白的图片放在首字母之前。而有了CSS后就可以直接通过text-indent字段来实现：

t6-1.png

text-indent会在第一行设置对应长度的空白，哪怕设置的额为负值：

p {text-indent: 3em;}

6-1.png

一般来说，text-indent对于所有的block元素都是有效的，不能用于inline的元素或是可替代的元素，例如图片。

另外上面提到还可以设置负值，那有什么用呢，来看个例子：

p.hang {text-indent: −25px;}

 This paragraph has a negatively indented first
line, which overlaps the floated image that precedes the text. Subsequent lines do not overlap the image, since they are not indented in any way.

6-2.png

另外需要注意的是缩进只针对元素的第一行有效，哪怕你在段落中间添加了换行。而且有意思的是缩进是可以继承的，所以弄得不好就会出现你意想不到的情况：

div#outer {width: 500px;} 
div#inner {text-indent: 10%;} 
p {width: 200px;}

This first line of the DIV is indented by 50 pixels.

This paragraph is 200px wide, and the first line of the paragraph is indented 50px. This is because computed values for 'text-indent' are inherited, instead of the declared values.

6-4.png

文本对齐

想必这个大家在平时已经用的很多了：

t6-2.png

6-5.png

跟之前类似，text-align也是只作用域block元素。那有人问了，文本的排列不是还有垂直布局么，那这个left和right是啥意思呢？left和right其实是历史遗留的名称，在CSS3中已经改为start和end。来看下具体的例子：

6-6.png

start和end对齐

在CSS3为text-align添加了一些了的新属性，而且连默认值也换了，从原来的left变成了start。这就非常智能了，完全按照语言的书写规范来设置，一般的从左往右书写的就是左边，从右往左书写的就是右边，从上到下书写的就是上边。另外与start对应的就是end，来看个例子：

6-7.png

justify 属性

justify是调整的意思，那么将text-align:justify；有什么功能呢？其实这个调整指的是文本换行时候的行为，到底是断开单词还是换行显示，那如果选择换行，是不是要适当撑开少单词那行的单词间距来保证占满一行。所以看起来这个调整跟浏览器自身关系很大，不同浏览器对调整的行为会有不同。

match-parent

这个属性可能现在浏览器还没有支持，顾名思义就是匹配父元素的的对齐方式。那有人就问啦，这个和inherit有啥区别么？其实是有的，举个例子，如果父元素设置为start，如果是inherit那么子元素也是start，而match-parent就会进行相应的计算和判断，如果是从左往右的书写方向，那么子元素就设置为left。

最后一行的对齐设置

有时候你想要设置最后一行的对齐方式，那么就可以使用text-align-last这个属性：

t6-3.png

我们来直观的看个例子：

6-9.png

不过用的时候得注意一个点，什么是最后一行？如果文本中有换行符号，那么换行前的那一行也会认为是最后一行。

机智的小伙伴已经注意到了，如果第一行和最后一行是同一行，那怎么办？答案是text-align-last会替换text-align。像下面这个例子，align的结果就是center。

p {text-align: start; text-align-last: center;}

inline对齐

行高

t6-4.png

当把行高应用到block元素的时候，其高度设定的是文本baseline基线间的最小距离，注意这里指的是最小值，而不是一个绝对的值。

下面咱们来考虑下行高的设置，如果给定的默认的normal，那么浏览器会自动计算，可能会有出入，不过一般为1.2倍的字体大小。
来看个例子：

body {line-height: 18px; font-size: 16px;} 
p.cl1 {line-height: 1.5em;}
p.cl2 {font-size: 10px; line-height: 150%;} 
p.cl3 {line-height: 0.33in;}

This paragraph inherits a 'line-height' of 14px from the body, as well as a 'font-size' of 13px.
This paragraph has a 'line-height' of 27px(18 * 1.5), so
it will have slightly more line-height than usual.
This paragraph has a 'line-height' of 15px (10 * 150%), so it will have slightly more line-height than usual.
This paragraph has a 'line-height' of 0.33in, so it will have slightly more line-height than usual.

6-11.png

行高的继承

有时候咱们会碰到这种情况：

body {font-size: 10px;}
div {line-height: 1em;} /* computes to '10px' */ 
p {font-size: 18px;}

This paragraph's 'font-size' is 18px, but the inherited 'line-height' value is only 10px. This may cause the lines of text to overlap each other by a small amount.

6-12.png

有没有发现行高太窄了，因为p继承了父元素div的行高10px，而自己是18px的font-size。这时候该怎么办呢，可以这样：

body {font-size: 10px;} 
div {line-height: 1;} 
p {font-size: 18px;}

行高设置为一个数值，其代表的含义就是比例因子，这样的话p就不会继承div里的具体行高，而是使用自己font-size来计算得到对应的行高。

div {line-height: 1.5;} 
p {font-size: 18px;}

This paragraph's 'font-size' is 18px, and since the 'line-height' set for the parent div is 1.5, the 'line-height' for this paragraph is 27px (18 * 1.5).

6-13.png

垂直对齐文本

在CSS中，vertical-align属性只能应用于inline的元素和可替代的额元素，例如图片和表单input，而且vertical-align无法被继承。

t6-5.png

baseline

如果设置veritcle-align:baseline，就会将对齐方式设置为基于父元素的baseline基线对齐。万一对齐的元素没有基线怎么办？那就沿用父元素的基线。

img {vertical-align: baseline;}

The image found in this paragraph  has its
bottom edge aligned with the baseline of the text in the paragraph.

6-14.png

上标和下标

vertical-align: sub将会把内容放到低于baseline的位置，至于低多少依赖于浏览器的设置。super正好是sub的对应，上标，功能类似。
注意，上标和下标的字体大小是不会默认变小的，一般还是继承自父元素。

span.raise {vertical-align: super;} 
span.lower {vertical-align: sub;}

This paragraph contains superscripted and subscripted text.

6-15.png

bottom选项

bottom指的是inline box的底部，来看个例子：

.feeder {vertical-align: bottom;}

This paragraph, as you can see quite clearly, contains
a  image and a  image, and then some text that is not tall.

6-16.png

上面咱们看到的是bottom字段，而其实，verticle-align：text-bottom也是一种底部对齐，而这个对齐的是文本的底部：

img.tbot {vertical-align: text-bottom;}

Here: a 
image, and then a  image.

6-17.png

top

top其实是bottom的对立面,而text-top则是text-bottom的对立面：

.up {vertical-align: top;}
.textup {vertical-align: text-top;}

Here: a  tall image, and then
some text that's been vertically aligned.
Here: a  image that's been vertically aligned, and then a  image that's similarly aligned.

6-18.png

middle

middle选项主要用于图片，而且也不是你想像中的居中，图片的中线位于1/4em到1/2em的中间：

6-19.png

很多浏览器将1ex设置为1/2em，不过并不是全部。

百分比

有人很好奇，对齐的百分比赋值是做什么用的，参考的标准又是什么？其实这个百分比是用来调整基线的，而标准则参考父元素的基线。而在数值上，100%代表的是当前元素的行高。正值抬高元素，负值降低元素。

sub {vertical-align: −100%;} 
sup {vertical-align: 100%;}

We can either soar to new heights or, instead, sink into despair...

6-20.png

设置具体长度

例如verticle-align: 5px，这一操作将会将元素抬升5px，反之亦然。

6-21.png

---

Word Spacing 和 Letter Spacing

word-space属性

该属性用于调整单词内部的间距，所以默认值为0。

t6-6.png

正值拉宽，而负值缩短间距：

p.spread {word-spacing: 0.5em;} 
p.tight {word-spacing: −0.5em;} 
p.base {word-spacing: normal;} 
p.norm {word-spacing: 0;}

The spaces between words in this paragraph will be increased by 0.5em.
The spaces between words in this paragraph will be decreased by 0.5em.
The spaces between words in this paragraph will be normal.
 
The spaces between words in this paragraph will be normal.

6-22.png

letter-spacing

该属性的间隔指的是一个word单词里面的字母间的间距。

t6-7.png

p {letter-spacing: 0;} /* identical to 'normal' */ 
p.spacious {letter-spacing: 0.25em;}
p.tight {letter-spacing: −0.25em;}

The letters in this paragraph are spaced as normal.
The letters in this paragraph are spread out a bit.
 
The letters in this paragraph are a bit smashed together.

6-24.png

另外值得注意的是word-spacing的属性可能会受到text-align的影响，比如text-align设置为justified，那么元素的间距就会自动计算。

---

文本转换

t6-8.png

通过该属性可以将文本转换为大写uppercase，小写lowercase，或者首字母大写capitalize。看个例子：

h1 {text-transform: capitalize;} 
strong {text-transform: uppercase;} 
p.cummings {text-transform: lowercase;} 
p.raw {text-transform: none;}

The heading-one at the beginninG
 By default, text is displayed in the capitalization it has in the source document, but it is possible to change this using
the property 'text-transform'.


For example, one could Create TEXT such as might have been Written by
the late Poet e.e.cummings.


If you feel the need to Explicitly Declare the transformation of text
to be 'none', that can be done as well.

6-27.png

---

文本修饰

t6-9.png

在多个选项中，underline和overline是一组，分别在底部和顶部添加line，而line-through顾名思义就是在中间加黑线，类似删除的意思。blink就是闪烁的，比较少见，需要浏览器支持。

p.emph {text-decoration: underline;} 
p.topper {text-decoration: overline;} 
p.old {text-decoration: line-through;} 
p.annoy {text-decoration: blink;} 
p.plain {text-decoration: none;}

6-29.png

元素默认都是none的情况，不添加任何装饰，不过也有例外，超链接a就会自带下划线，当然可以通过设置样式来去除：

a {text-decoration: none;}

奇怪的装饰

注意text-decoration是不继承的，所以有时候子元素的装饰会被父元素所遮盖：

p {text-decoration: underline; color: black;} 
strong {color: gray;}

This paragraph, which is black and has a black underline, also contains strongly emphasized text which has the black underline beneath
it as well.

6-30.png

---

文本渲染

text-rendering是最近才添加的属性，主要用于部分浏览器支持SVG的特性。

t6-10.png

数值optimizeSpeed和optimizeLegibility，顾名思义，代表的是优化的两个方向，一个速度，一个可读性。由于是新属性，所以很多依赖浏览器的实现：

6-34.png

另一个数值geometricPrecision，指导浏览器侧重画出最精细的文本图案。

---

文本阴影

t6-11.png

文本阴影的默认设置就是一个颜色，后面跟三个可选的长度值，前两个长度定义水平和垂直方向的偏移量。来看几个例子：

text-shadow: green 5px 0.5em;
text-shadow: rgb(128,128,255) −5px −0.5em;

6-35.png

刚上面忘说了第三个长度，定义的是模糊半径（blur radius,学过ps的可能很清楚）。不过具体的模糊算法依赖浏览器的实现：

p.cl1 {color: black; text-shadow: gray 2px 2px 4px;}
p.cl2 {color: white; text-shadow: 0 0 4px black;}
p.cl3 {color: black; text-shadow: 1em 0.5em 5px red, −0.5em −1em hsla(100,75%,
25%,0.33);}

6-36.png

---

处理空白

空白的处理很重要，涉及浏览器处理空格space，换行和tab。

t6-12.png

默认的XHTML其实也有处理这块，它的处理规则是将所有的空格都缩短至1个空格，比如：

This paragraph     has   many   spaces   in   it.

显示出来就是正常的，就等于p{white-space:normal}，那如果想要保留空格怎么办，可以使用pre：

p {white-space: pre;}

This paragraph        has            many       spaces in it.

6-37.png

而和pre相对的就是nowrap，坚决不让元素换行，除非使用了
。

This paragraph is not allowed to wrap, which means that the only way to end a line is to insert a line-break element. If no such element is inserted, then the line will go forever, forcing the user to scroll horizontally to read whatever can't be initially displayed 
in the browser window.

6-38.png

CSS2.1中引入了pre-wrap和pre-line,目的就是更好的控制空格的处理。那这两个有什么区别呢？pre-wrap在pre的基础上支持文本中的换行，而pre-line就会把空格都缩短到1个，但支持换行，来看个例子：

This paragraph has a great many s p a c e s within its textual
     content,   but their    preservation     will    not    prevent   line
      wrapping or line breaking.


This paragraph has a great many s p a c e s within its textual content, but their collapse will not prevent line
wrapping or line breaking.

6-39.png

设置tab的大小

t6-13.png

默认来说，tab的字符就默认设置为8个空格。如果给的是具体的长度，那么就会用具体的数值来代替，比如tab-size: 10px

6-40.png

---

换行 和 断字

有时候一行单词特别多，就需要设置断字：

t6-14.png

几个选项中最有意思的就属auto了，允许浏览器自动插入横杠的断字符，不过关于如果断字，或者说在那种情况下是合适的根语言本身也有很大关系。

.cl01 {hyphens: auto;} 
.cl02 {hyphens: manual;} 
.cl03 {hyphens: none;}

Supercalifragilisticexpialidocious antidisestablishmentarian ism.
Supercalifragilisticexpialidocious antidisestablishmentarian ism.
Super­cali­fragi­listic­expi­ali­ docious anti­dis­establish­ment­arian­ism.
Super­cali­fragi­listic­expi­ali­ docious anti­dis­establish­ment­arian­ism.

6-41.png

在设置hyphen的时候要格外小心，因为它是继承的，可以通过下面这种方式阻断hyphens的传递：

body {hyphens: auto;}
code, var, kbd, samp, tt, dir, listing, plaintext, xmp, abbr, acronym, blockquote, q, textarea, input, option {hyphens: manual;}

另外可能影响hyphen的另一个属性为word-break:

t6-15.png

如果一行文本太长的话，一般就会自动换行，而word-break就可以人为控制这种换行方式。
默认值为normal，浏览器针对不同语言进行换行操作，例如对于拉丁语系来说（比如英语），就以单词为单位进行分隔。但如果是break-all的话，那么哪怕结尾的一个单词中间，也会进行分隔，而且没有分隔符。注意line-break属性也会影响break-all属性。最后看下keep-all，如果没有碰到空格那么就是一个语块，不会换行。

刚说到word-break，而跟其紧密相关的就是line-break：

t6-16.png

下面来看看几个不同的选项吧

• loose：在文本换行中应用最宽松的规则，适合在短的文章中，例如报纸排版
• normal：应用普通规则，覆盖大部分情况
• strict：应用最严格规则，但没有准确的定义。

文本换行

在上面介绍完各种换行后，那如果文本还是超出了边框范围怎么办？那就可以使用overflow-wrap属性

t6-17.png

这两个选项的功能也很简单，normal允许单词完整输出后换行，而break-work就是把不等单词结束直接换行，而且没有短横杠连接，就像下面这样：

6-43.png

由于历史原因，overflow-wrap和word-wrap有很多功能是重叠的，而浏览器对word-wrap的支持更好点，所以overflow-wrap更多是用于老的兼容：

pre {word-wrap: break-word; overflow-wrap: break-word;}

---

书写方式

不同的语言其常用的书写方式可能是不同的，比如英语和汉字都是从左到右，从上到下，而像阿拉伯语或是希伯来语则是从右向左，从上到下。
在CSS中可以通过writing-mode来设置：

t6-18.png

来看看三种不同的方向：

6-44.png

默认是不支持从下到上的顺序的，但如果一定要实现其实也是可以的：

.flip {transform: rotate(180deg);} 
#one {writing-mode: vertical-rl;} 
#two {writing-mode: vertical-lr;}

先将元素翻转180度，然后设置从左往右的垂直属性就可以。

6-45.png

改变文本朝向

t6-19.png

.verts {writing-mode: vertical-lr;} 
#one {text-orientation: mixed;} 
#two {text-orientation: upright;} 
#thr {text-orientation: sideways;}

6-49.png

声明文本方向

回到CSS2.0的时代，其中有两个属性是可以来改变行内基线的方向的：direction和unicode-bidi

t6-20.png

对于需要从右向左的语言可以提前设置：

*:lang(ar), *:lang(he) {direction: rtl;}

Unicode相比CSS提供更强的方向操作

t6-21.png

---

小结

除了font-face可以设置文本的样式外，css本身也提供了非常多的辅助属性，包括添加下划线，改变文本间距，缩进，对齐，换行等等，甚至可以改变行间距。又由于web中大量出现的文本，所以这些属性提供的功能还是非常强大的，让我们期待文本中更加有趣的属性在未来被引入把。