文本属性

[xiongshj]

文本属性

这是学习《CSS 权威指南》的第 6 章的笔记。

缩进和行内对齐

缩进文本

CSS 文本缩进使用 text-indent 属性，只能用于块级元素上。

如果想“缩进”行内元素的首行，可以通过内边距或外边距实现。

text-indnet 属性的值可以是负值，这样可以实现一些有趣的效果。

text-indent 属性的值可以使用任何长度单位，包括百分数。

注意，文本缩进只影响元素的第一行，即便有换行也是如此。text-indent 会继承，因此可能会出现预料之外的效果。

文本对齐

文本对齐使用 text-align 属性，适用于块级元素，取值有 start | end | left | right | center | justify | match-parent | start end。

• 目前支持范围最广的三个值：left、right 和 center。
• start 意思是文本与元素所在行框的起边对齐。
• end 把文本与行框的终边对齐。
• justify 是两端对齐。
• 与父元素一致：match-parent。
• start end 也是 text-align 的一个取值，但是它尚未实现，以后的规范可能会将其删除。

对齐最后一行

对齐最后一行使用 text-align-last 属性，取值有 auto | start | end | left | right | center | justify。

只要一行后面有强制换行，不管是不是在元素的末尾，都受 text-align-last 属性的控制。

text-align-last 有个有趣的现象：如果元素的第一行也是最后一行，text-align-last 的优先级比 text-align 高。

块级对齐

行的高度

line-height：行高。

line-height 控制的是行距，是除字体高度之外在文本行上方的额外空间。也就是说，line-height 的值与字体高度之差就是行距。行距可能为负数。

line-height 取默认值 normal 时，行之间的空间由用户代理计算。

em、ex 和百分数相对元素的 font-size 的值计算。

块级元素之间继承的行高有点复杂。从父元素继承 line-height 值时，根据父元素的字号计算，而不根据子元素计算。

body {
  font-size: 10px;
}

div {
  line-height: 1em; /* 计算结果为 10px */
}

p {
  font-size: 18px;
}

<div>
  <p>111</p>
</div>

更好的方法是使用纯数字，即设定一个换算系数：

div {
  line-height: 1.5;
}

p {
  font-size: 18px;
}

<div>
  <p>222</p>
</div>

现在段落里的 line-height 是 27。

纵向对齐文本

CSS 中的 vertical-align 属性只能用于行内元素和置换元素（例如图像和表单输入框）。vertical-align 属性不继承。

• vertical-align: baseline 强制元素的基线与父元素的基线对齐。如果目标元素没有基线，例如图像、表单输入框或其他置换元素，元素的底端与父元素的基线对齐。

• vertical-align: sub 把元素放在下标处，即元素的基线（对置换元素来说是底边线）低于父元素的基线。super 的作用与 sub 相反，让元素的基线（或置换元素的底边线）高于父元素的基线。
  注意，sub 和 super 不改变元素的字号，因此下标和上标中的文本不会变小I（或变大）。下标和上标中的文本默认情况下与父元素的字号相等。

• vertical-align: bottom 把元素所在行内框的底边与行框的底边对齐（底端对齐）。

• vertical-align: text-bottom 相对行中文本的底边对齐。

• vertical-align: top 的作用与 bottom 相反。
  vertical-align: text-top 的作用与 text-bottom 相反。

• vertical-align: middle 中线对齐。

• 把 vertical-align 的值设为百分数，效果是把元素的基线（或置换元素的底边）相对父元素的基线抬升或下沉指定的量（指定的百分数相对元素自身而非父元素的 line-height 计算）。

• 把值设为长度值时，vertical-align 的效果很简单：把元素抬升或下沉声明的距离。因此，vertical-align: 5px; 把元素从原位置向上抬升 5 像素。

单词间距和字符间距

单词间距使用 word-spacing 属性，其值为长度，可正可负。其实，word-spacing 属性用于修改单词之间的距离。因此，默认值 normal 等于把值设为零（0）。

用最简单的 CSS 术语来说，“单词”是指两侧有某种空白的非空字符构成的字符串。word-spacing 不能用于象形文字或非罗马书写体。

word-spacing 属性的很多问题在 letter-spacing 属性上也有体现。这两个属性之间唯一的区别是，letter-spacing 属性修改的是字符或字母之间的距离。

文本转换

使用 text-transform 属性转变文本的大小写，取值有 uppercase | lowercase | capitalize | none

其中 capitalize 只把各单词的首字母变成大写。

文本装饰

text-decoration 的取值有：

• underline 为元素添加下划线。
• overline 与 underline 正好相反。
• line-through 绘制一条贯穿文本中部的线，叫删除线。
• blink 让文本一闪一闪。
• none 值把应用到元素上的装饰效果去掉。

一个规则中可以使用多个装饰效果。

a:link,
a:visited {
  text-decoration: underline overline;
}

文本渲染结果

text-rendering 是 CSS 最近新增的属性，它其实是一个 SVG 属性，支持它的用户代理不会把它视作 CSS 属性。这个属性的作用是让创作人员指定用户代理在显示文本时应该优先考虑什么方面，取值有：

• optimizeSpeed 指明首先考虑绘制速度。
• optimizeLegibility 指明首先考虑清晰性。
• geometricPrecision 让用户代理尽量精准地绘制文本，确保能无损缩放。
• auto 用户代理自行决定合适的方法，只要向清晰性倾斜就行。

文本阴影

为文本添加阴影：text-shadow 属性。

阴影由一个可选的颜色和三个长度值定义，最后一个长度值也是可选的。

如果省略颜色，阴影的颜色将与文本的颜色相同。

前两个长度值是阴影离文本的距离。第一个长度值设定横向偏移，第二个长度值设定纵向偏移。可选的第三个长度值定义阴影的模糊半径。

p.cl1 {
  color: black;
  text-shadow: gray 2px 2px 4px;
}

p.cl2 {
  color: white;
  text-shadow: 0 0 4px black;
}

处理空白

white-space 属性，影响用户代理对文档源码中空格、换行符和制表符的处理方式，取值有 normal | nowrap | pre | pre-wrap | pre-line。

值	空白	换行符	自动换行
pre-line	折叠	保留	允许
normal	折叠	忽略	允许
nowrap	折叠	忽略	禁止
pre	保留	保留	禁止
pre-wrap	保留	保留	允许

设定制表符的宽度 tab-size。

换行和断字

hyphens 自动断字，取值有 manual | auto | none。

word-break 软换行，取值有 normal | break-all | keep-all。

line-break 属性也能影响软换行，取值有 auto | loose | normal | strict。

overflow-wrap 文本换行，取值有 normal | break-word。

有个名为 word-wrap 的属性，其作用与 overflow-wrap 完全一样。

书写模式

设定书写模式的属性是 writing-mode，取值有：

• horizontal-tb 行内方向为横向，块级方向为从上到下。
• vertical-rl 和 vertical-lr 采用的行内方向是纵向，块级方向是从右至左或从左至右。

改变文本方向的属性是 text-orientation，取值有 mixed | upright | sideways。

小结

从多个角度考虑问题，多动脑。