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

作者: 秋名山车神12138 | 来源:发表于2018-10-30 18:07 被阅读0次

文本和之前说的字体有什么区别呢？文本本身是内容，而字体就是用来显示这个内容的。借助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;}

<img src="star.gif" style="width: 60px; height: 60px;
float: left;" alt="An image of a five-pointed star."/>
<p class="hang"> 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.</p>

6-2.png

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

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

<div id="outer">
<div id="inner">
This first line of the DIV is indented by 50 pixels.
<p>
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.
</p>
</div>
</div>

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;}

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

6-11.png

行高的继承

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

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

<div>
<p>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.</p>
</div>

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;}

<div>
<p>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).</p>
</div>

6-13.png

垂直对齐文本

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

t6-5.png

baseline

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

img {vertical-align: baseline;}

<p>The image found in this paragraph <img src="dot.gif" alt="A dot" /> has its
bottom edge aligned with the baseline of the text in the paragraph.</p>

6-14.png

上标和下标

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

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

<p>This paragraph contains <span class="raise">superscripted</span> and <span class="lower">subscripted</span> text.
</p>

6-15.png

bottom选项

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

.feeder {vertical-align: bottom;}

<p>This paragraph, as you can see quite clearly, contains
a <img src="tall.gif" alt="tall" class="feeder" /> image and a <img src="short.gif" alt="short" class="feeder" /> image, and then some text that is not tall.</p>

6-16.png

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

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

<p>Here: a <img src="tall.gif" style="vertical-align: middle;" alt="tall" />
image, and then a <img src="short.gif" class="tbot" alt="short" /> image.</p>

6-17.png

top

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

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

<p>Here: a <img src="tall.gif" alt="tall image"> tall image, and then
<span class="up">some text</span> that's been vertically aligned.</p>
<p>Here: a <img src="tall.gif" class="textup" alt="tall"> image that's been vertically aligned, and then a <img src="short.gif" class="textup" alt="short" /> image that's similarly aligned.</p>

6-18.png

middle

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

6-19.png

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

百分比

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

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

<p>We can either <sup>soar to new heights</sup> or, instead, <sub>sink into despair...</sub></p>

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;}

<p class="spread">The spaces between words in this paragraph will be increased by 0.5em.</p>
<p class="tight">The spaces between words in this paragraph will be decreased by 0.5em.</p>
<p class="base">The spaces between words in this paragraph will be normal.</p> <p class="norm">The spaces between words in this paragraph will be normal.</p>

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;}

<p>The letters in this paragraph are spaced as normal.</p>
<p class="spacious">The letters in this paragraph are spread out a bit.</p> 
<p class="tight">The letters in this paragraph are a bit smashed together.</p>

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;}

<h1>The heading-one at the beginninG</h1>
<p> By default, text is displayed in the capitalization it has in the source document, but <strong>it is possible to change this</strong> using
the property 'text-transform'.
</p>
<p class="cummings">
For example, one could Create TEXT such as might have been Written by
the late Poet e.e.cummings.
</p>
<p class="raw">
If you feel the need to Explicitly Declare the transformation of text
to be 'none', that can be done as well.
</p>

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;}

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

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个空格，比如：

<p>This paragraph     has   many   spaces   in   it.</p>

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

p {white-space: pre;}

<p>This paragraph        has            many       spaces in it.</p>

6-37.png

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

<p style="white-space: 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 <br/>in the browser window.</p>

6-38.png

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

<p style="white-space: pre-wrap;">
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.
</p>
<p style="white-space: pre-line;">
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.
</p>

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;}


<p class="cl01">Supercalifragilisticexpialidocious antidisestablishmentarian ism.</p>
<p class="cl02">Supercalifragilisticexpialidocious antidisestablishmentarian ism.</p>
<p class="cl02">Super&#xad;cali&#xad;fragi&#xad;listic&#xad;expi&#xad;ali&#xad; docious anti&#xad;dis&#xad;establish&#xad;ment&#xad;arian&#xad;ism.</p>
<p class="cl03">Super&#xad;cali&#xad;fragi&#xad;listic&#xad;expi&#xad;ali&#xad; docious anti&#xad;dis&#xad;establish&#xad;ment&#xad;arian&#xad;ism.</p>

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中大量出现的文本，所以这些属性提供的功能还是非常强大的，让我们期待文本中更加有趣的属性在未来被引入把。