CSS文本部分之文本样式[3]

font系列属性针对字体样式，那text系列属性则针对文本样式。

1. text-align属性

文本排列，决定文本在水平方向上的排列方向；

// 靠左排列
text-align: left;
// 居中排列
text-align: center;
// 靠右排列
text-align: right;

2. text-indent属性

文本缩进，可选择所有合法的长度单位；

// 缩进2个字
text-indent: 2em;

3. text-transform属性

文本转换，将文本转为大写字母、小写字母或首字母大写；

// 不对文本进行任何转换(默认)
text-transform: none;
// 所有字母大写
text-transform: uppercase;
// 所有字母小写
text-transform: lowercase;
// 每个单词的首字母大写
text-transform: capitalize;

4. text-decoration属性

文本修饰，在文本上面添加上划线、下划线或中划线；

// 不添加任何文本修饰(默认)
text-decoration: none;
// 在文本下方添加下划线: 在<a>标签悬浮样式带有该样式
text-decoration: underline;
// 穿过文本
text-decoration: line-through;
// 在文本上方添加上划线
text-decoration: overline;

5. text-overflow属性

文本溢出，表示当文本内容超出元素时如何处理；

// 直接剪切掉多余的文本
text-overflow: clip;
// 在溢出的最后一个字符，将其替换为省略号(...)
text-overflow: ellipsis;

单行文本溢出：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本溢出(webkit)：
overflow: hidden;
-webkit-line-clamp: 3; /* 三行，多余以省略号显示 */

6. text-shadow属性

文本阴影，类似盒子阴影，给文本添加阴影；

// 不添加任何阴影(默认)
text-shadow: none;
// 添加X轴2px、Y轴2px、模糊半径为2px、颜色为红色的阴影
text-shadow: 2px 2px 2px red;
参数说明：
h-shadow: 水平阴影位置；
v-shadow: 垂直阴影位置；
blur: 模糊半径；
color：阴影颜色