CSS文本部分之文本样式[3]
font
系列属性针对字体样式,那text
系列属性则针对文本样式。
text-align
属性
文本排列,决定文本在水平方向上的排列方向;
// 靠左排列
text-align: left;
// 居中排列
text-align: center;
// 靠右排列
text-align: right;
text-indent
属性
文本缩进,可选择所有合法的长度单位;
// 缩进2个字
text-indent: 2em;
text-transform
属性
文本转换,将文本转为大写字母、小写字母或首字母大写;
// 不对文本进行任何转换(默认)
text-transform: none;
// 所有字母大写
text-transform: uppercase;
// 所有字母小写
text-transform: lowercase;
// 每个单词的首字母大写
text-transform: capitalize;
text-decoration
属性
文本修饰,在文本上面添加上划线、下划线或中划线;
// 不添加任何文本修饰(默认)
text-decoration: none;
// 在文本下方添加下划线: 在<a>标签悬浮样式带有该样式
text-decoration: underline;
// 穿过文本
text-decoration: line-through;
// 在文本上方添加上划线
text-decoration: overline;
text-overflow
属性
文本溢出,表示当文本内容超出元素时如何处理;
// 直接剪切掉多余的文本
text-overflow: clip;
// 在溢出的最后一个字符,将其替换为省略号(...)
text-overflow: ellipsis;
单行文本溢出:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行文本溢出(webkit):
overflow: hidden;
-webkit-line-clamp: 3; /* 三行,多余以省略号显示 */
text-shadow
属性
文本阴影,类似盒子阴影,给文本添加阴影;
// 不添加任何阴影(默认)
text-shadow: none;
// 添加X轴2px、Y轴2px、模糊半径为2px、颜色为红色的阴影
text-shadow: 2px 2px 2px red;
参数说明:
h-shadow: 水平阴影位置;
v-shadow: 垂直阴影位置;
blur: 模糊半径;
color:阴影颜色