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

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

  1. text-align属性

文本排列,决定文本在水平方向上的排列方向;

// 靠左排列
text-align: left;
// 居中排列
text-align: center;
// 靠右排列
text-align: right;
  1. text-indent属性

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

// 缩进2个字
text-indent: 2em;
  1. text-transform属性

文本转换,将文本转为大写字母、小写字母或首字母大写;

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

文本修饰,在文本上面添加上划线、下划线或中划线;

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

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

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

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

多行文本溢出(webkit):
overflow: hidden;
-webkit-line-clamp: 3; /* 三行,多余以省略号显示 */
  1. text-shadow属性

文本阴影,类似盒子阴影,给文本添加阴影;

// 不添加任何阴影(默认)
text-shadow: none;
// 添加X轴2px、Y轴2px、模糊半径为2px、颜色为红色的阴影
text-shadow: 2px 2px 2px red;
参数说明:
h-shadow: 水平阴影位置;
v-shadow: 垂直阴影位置;
blur: 模糊半径;
color:阴影颜色
posted @ 2020-06-15 20:33  绝弹笔记  阅读(135)  评论(0编辑  收藏  举报