CSS 简明教程 - 文本 ( Text ) 属性
CSS 中有些属性用于定制文本的外观，包括但不限于 text-align、text-decoration、text-transform、text-indent，使用这些属性，我们可以更改文本的 对齐方式、间距、缩进等
文本水平对齐方式 ( text-align )
CSS text-align 属性用于设置文本的水平对齐方式
该属性有三个可选的值，分别是
| 值 | 说明 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
| inherit | 规定应该从父元素继承 text-align 属性的值 |
以下代码显示了左对齐，右对齐和居中对齐的文本
h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; }
注意：如果语言方向是从左到右，则保留 text-align 的默认值，也就是 left; 如果语言方向是从右到左，则 text-align 的默认值是 right
我们还可以设置 text-align 的属性值 justify，在两边对齐 justify 文本中，每行文本的开始和结束单词位于父元素的左右边界，中间单词自动调整间距，使每行的长度相同
div { text-align: justify; }
文本缩进 ( text-indent )
CSS text-indent 属性可以将元素的第一行缩进一定长度，长度值可以为负
我们经常会在 <p> 元素上使用 text-indent 属性来缩进段落中的第一行文本，例如，以下 CSS 规则将所有段落的第一行缩进 5em
p { text-indent: 5em; }
注意：text-indent 属性仅适用于块级元素，不能应用于内联元素
文本装饰 ( text-decoration )
接下来，我们将讨论 text-decoration 属性，这是一个有趣的属性，提供了许多非常有趣的行为
text-decoration 属性有以下 5 个值
| 值 | 说明 |
|---|---|
| none | 默认。定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
| blink | 定义闪烁的文本 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值 |
经常用到的是 text-decoration:none;，用于设置文本不需要任何装饰，它通常用于删除链接文本的下划线
text-decoration 属性的其它值则用于下划线，上划线，删除线和闪烁文本
h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } h4 { text-decoration: blink; }
文字转换 ( text-transform )
text-transform 属性可以更改文本的大小写
该属性有以下四个可选值
| 值 | 说明 |
|---|---|
| none | 默认。定义带有小写字母和大写字母的标准的文本 |
| capitalize | 文本中的每个单词以大写字母开头 |
| uppercase | 定义仅有大写字母 |
| lowercase | 定义无大写字母，仅有小写字母 |
| inherit | 规定应该从父元素继承 text-transform 属性的值 |
下面的代码是使用 text-transform 属性的范例
p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; }
单词间距 ( word-spacing )
word-spacing 属性会更改文本中每个单词的间距。默认值为 normal 或0
如果 word-spacing 属性值为正数，则单词间距增加，否则，单词空间将拉近
例如
<style> p.spread { word-spacing: 30px; } p.tight { word-spacing: -0.5em; } </style> <p class="spread"> This is a paragraph. The spaces between words will be increased. </p> <p class="tight"> This is a paragraph. The spaces between words will be decreased. </p>
注意：这里的 「 单词 」 ( word ) 一词是指由空格字符包围的非空白字符串，没有任何实际的语义
字母间距 ( letter-spacing )
letter-spacing 属性用于指定文本中字符之间的空白，默认值为 normail 或 0
如果 letter-spacing 属性值为正数，则字符间距增加，否则，字符空间将拉近
下面的代码用于演示如何增加或减少字符之间的间距
<style> h1 { letter-spacing: -0.5em } h4 { letter-spacing: 20px } </style> <h1>This is header 1</h1> <h4>This is header 4</h4>
空白 ( white-space)
white-space 属性控制文本中的空格和换行符的显示方式
可选的值有
| 值 | 说明 |
|---|---|
| normal | 默认。空白会被浏览器忽略 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止 |
| pre-wrap | 保留空白符序列，但是正常地进行换行 |
| pre-line | 合并空白符序列，但是保留换行符 |
| inherit | 规定应该从父元素继承 white-space 属性的值 |
pre
默认情况下，浏览器会将多个连续的空格缩短为一个空格，但是可以使用 pre 来保持原样的多个空格
<style> p { white-space: pre; } </style> <p>这 个段落 有 许多的 空 格</p>
这时候, <p> 元素的效果相当于 <pre> 元素
nowrap
如果将 white-space 属性值设置为 nowrap，则浏览器将阻止文本换行，除非使用了 <br> 元素
例如
<style> p{ white-space: nowrap } </style> <p> 这里是一些文本。 这里是一些文本。 这里是一些文本。 这里是一些文本。 这里是一些文本。 这里是一些文本。 这里是一些文本。 </p>
pre-wrap 和 pre-line
如果将 white-space 属性值设置为 pre-wrap，浏览器不仅会保留空格，还会支持文本换行，也就是支持换行符 ( \n 或 \r\n 或 \r )
如果将 white-space 属性值设置为 pre-line ，浏览器将合并空格，但它仍支持自动文本换行
例如
<html> <head> <meta charset="utf-8" /> <style> p.pre-wrap { white-space: pre-wrap; } p.pre-line { white-space: pre-line; } </style> </head> <body> <h1>white-space: pre-wrap</h1> <p class="pre-wrap">This paragraph has a great many s p a c e s with its textual content, but their preservation will not prevent line wrapping or line breaking.</p> <h1>white-space: pre-line</h1> <p class="pre-line">This paragraph has a great many s p a c e s with its textual content, but their collapse will not prevent line wrapping or line breaking.</p> </body> </html>
文本方向 direction
direction 属性用于控制文本的输出方向
direction 可选的值有
| 值 | 描述 |
|---|---|
| ltr | 默认。文本方向从左到右 |
| rtl | 文本方向从右到左 |
| inherit | 规定应该从父元素继承 direction 属性的值 |
direction 属性有两个值 ltr 和 rtl，direction 属性的默认值是 ltr，这意味着文本从左到右输出。 如果希望从右向左输出文本，则应将 direction 属性设置为 rtl
