CSS - 9、文本属性
在CSS中，文本属性（Text Properties）用于控制文本的外观和排版，包括对齐方式、修饰、转换、缩进、行高、间距等。这些属性可以帮助你设计出美观且易于阅读的文本内容。以下是CSS中常见的文本属性及其使用方法。
1. text-align（文本对齐方式）
text-align属性用于设置文本的水平对齐方式。
常用值：
left（默认值）：左对齐。right：右对齐。center：居中对齐。justify：两端对齐（常用于报纸排版）。
示例：
p {
text-align: center; /* 文本居中对齐 */
}
2. text-decoration（文本修饰）
text-decoration属性用于设置文本的修饰效果，如下划线、删除线等。
常用值：
none（默认值）：无修饰。underline：下划线。overline：上划线。line-through：删除线。blink：闪烁（不推荐使用，部分浏览器不支持）。
示例：
a {
text-decoration: none; /* 去掉链接的下划线 */
}
strike {
text-decoration: line-through; /* 添加删除线 */
}
3. text-transform（文本转换）
text-transform属性用于控制文本的大小写转换。
常用值：
none（默认值）：不转换。uppercase：全部大写。lowercase：全部小写。capitalize：首字母大写。
示例：
h1 {
text-transform: uppercase; /* 全部大写 */
}
p {
text-transform: capitalize; /* 首字母大写 */
}
4. text-indent（文本缩进）
text-indent属性用于设置段落首行的缩进。
常用单位：
- 像素（
px）：固定缩进。 - 百分比（
%）：相对于父元素宽度的百分比。 em：相对于字体大小的倍数。
示例：
p {
text-indent: 2em; /* 首行缩进两个字符宽度 */
}
5. line-height（行高）
line-height属性用于设置行间距，可以提高文本的可读性。
常用值：
- 数字：相对于字体大小的倍数（无单位）。
- 像素（
px）：固定行高。 - 百分比（
%）：相对于字体大小的百分比。
示例：
p {
line-height: 1.5; /* 行高为字体大小的1.5倍 */
}
6. letter-spacing（字母间距）
letter-spacing属性用于设置字符之间的间距。
常用单位：
- 像素（
px）：固定间距。 em：相对于字体大小的倍数。
示例：
p {
letter-spacing: 1px; /* 字符间距为1像素 */
}
7. word-spacing（单词间距）
word-spacing属性用于设置单词之间的间距，仅对英文等使用空格分隔单词的语言有效。
常用单位：
- 像素（
px）：固定间距。 em：相对于字体大小的倍数。
示例：
p {
word-spacing: 5px; /* 单词间距为5像素 */
}
8. white-space（空白处理）
white-space属性用于控制元素内的空白字符（如空格、换行符）如何处理。
常用值：
normal（默认值）：忽略多余的空白字符，换行符会被折叠成一个空格。pre：保留所有空白字符，包括换行符和空格。nowrap：忽略换行符，文本会在一行内显示。pre-wrap：保留空白字符，但允许文本换行。pre-line：保留换行符，但忽略多余的空格。
示例：
p {
white-space: nowrap; /* 文本在一行内显示 */
}
9. text-shadow（文本阴影）
text-shadow属性用于为文本添加阴影效果，增强视觉效果。
语法：
text-shadow: [水平偏移量] [垂直偏移量] [模糊半径] [颜色];
示例：
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 水平偏移2px，垂直偏移2px，模糊半径4px，半透明黑色 */
}
10. text-overflow（文本溢出处理）
text-overflow属性用于控制当文本超出容器时的显示方式。
常用值：
clip（默认值）：超出部分被裁剪，不显示。ellipsis：超出部分显示为省略号（...）。fade：超出部分渐隐（不常用）。
示例：
div {
width: 100px;
overflow: hidden; /* 隐藏超出部分 */
white-space: nowrap; /* 文本在一行内显示 */
text-overflow: ellipsis; /* 显示省略号 */
}
11. direction（文本方向）
direction属性用于设置文本的书写方向。
常用值：
ltr（默认值）：从左到右（Left-to-Right）。rtl：从右到左（Right-to-Left）。
示例：
p {
direction: rtl; /* 文本从右到左显示 */
}
12. vertical-align（垂直对齐）
vertical-align属性用于设置行内元素或表格单元格的垂直对齐方式。
常用值：
baseline（默认值）：基线对齐。top：顶部对齐。middle：居中对齐。bottom：底部对齐。sub、super：下标或上标。
示例：
span {
vertical-align: middle; /* 垂直居中对齐 */
}
文本属性的总结
CSS提供了丰富的文本属性，用于控制文本的外观和排版。以下是主要的文本属性及其用途：
| 属性 | 用途 |
|---|---|
text-align |
设置文本的水平对齐方式（left、right、center、justify） |
text-decoration |
设置文本修饰（underline、line-through、none等） |
text-transform |
设置文本大小写转换（uppercase、lowercase、capitalize） |
text-indent |
设置段落首行缩进（单位：px、em、%） |
line-height |
设置行间距（单位：px、em、%） |
letter-spacing |
设置字符间距（单位：px、em） |
word-spacing |
设置单词间距（单位：px、em） |
white-space |
控制空白字符的处理方式（normal、pre、nowrap等） |
text-shadow |
添加文本阴影效果（水平偏移、垂直偏移、模糊半径、颜色） |
text-overflow |
处理文本溢出（ellipsis、clip） |
direction |
设置文本方向（ltr、rtl） |
vertical-align |
设置行内元素的垂直对齐方式（top、middle、bottom等） |
示例：综合使用文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本属性示例</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
text-transform: uppercase;
text-shadow: 2px 
浙公网安备 33010602011771号