上期文章：
panda456：小边框，大秘密zhuanlan.zhihu.com哈哈，没想到吧。自从以前连续出了两期HTML中的文本与段落，这次又出了一期。
就不多讲废话了，直接开门见山——这期文章主要讲有关文本的CSS处理。
之前讲过用color和background-color设置文本颜色和背景颜色，以及用text-align设置文本的对齐方式，这期文章就只讲新内容，之前的内容跳过，大家如果不记得了可以翻翻本专栏内早期的文章。
文字的排列方向
大多数语言（包括但不限于中文、英文）都是从左往右阅读的，因此text-align的值默认是left。但像希伯来语和阿拉伯语之类的语言，是从右到左阅读的，因此text-align的值默认是right。
同时使用direction和unicode-bidi可以让从左往右的文字变成从右往左（适用于阿拉伯语和希伯来语等语言）（读阅左往右从，子样个这像就）：
p {
direction:rtl;/*默认值是ltr*/
unicode-bidi:bidi-override;
}文本的垂直对齐
众所周知，<img>是内联元素，也就是说，<img>可以嵌套进<p>里面。那么，当图片的宽度大于一行文字的宽度，这一行文字应该放在哪里呢？下面这张图说明了问题：
使用vertical-align可以设置文本位于上方、中间或者下方，要想实现上面的效果，代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
img.ex1 {
vertical-align:top;
}
img.ex2 {
vertical-align:middle;
}
img.ex3 {
vertical-align:bottom;/*默认*/
}
</style>
</head>
<body>
<h1>示例</h1>
<p>这是一些文本，作为示例。<img src="example.jpg" class="ex1" />这是一些文本，作为示例。这是一些文本，作为示例。这是一些文本，作为示例。</p>
<p>这是一些文本，作为示例。<img src="example.jpg" class="ex2" />这是一些文本，作为示例。这是一些文本，作为示例。这是一些文本，作为示例。</p>
<p>这是一些文本，作为示例。<img src="example.jpg" class="ex3" />这是一些文本，作为示例。这是一些文本，作为示例。这是一些文本，作为示例。</p>
</body>
</html>效果如下：
文本装饰
你可以设置文本的额外装饰text-decoration，比如overline、line-through和underline，也可以设置为none，通常用于给链接去除下划线。
注意：建议不要给非链接文本添加下划线，用户容易混淆。
大小写转换
通过text-transform，你可以将每个字母都转换为大写，或者把每个字母都转换为小写，也可以把每个单词的首字母转换为大写。属性值分别是uppercase、lowercase和capitalize。
文本缩进
你可以用text-indent来设置每一段文本前的缩进。例如，中文的每个自然段前要留两个空格，一般为32px，那么代码这样写：
p {
text-indent:32px;
}注意：text-indent可以是负值。
字母间距
letter-spacing用于设置英文当中字母之间的距离，可以以px为单位，也可以是CSS的其他合法单位。
行间距
line-height用于设置行间距，可以使用%，也可以使用px（默认为20px左右），或者一个没有单位的数值（默认为1）。
单词间距
也叫字间距，用word-spacing可以设置单词间距，可以以px为单位，也可以是CSS的其他合法单位。
文本阴影
可以使用text-shadow设置文本的阴影，语法如下：
element {
text-shadow:horizontal vertical blur color;/*后两者可选，前三者可以是以px为单位*/
}下期文章：
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
