文本标签的基本属性

Posted 2021-01-28 wed97

white-space: 设置元素中空白的处理方式

normal：默认处理方式。

pre：保留文本原来带的空格，当文字超出边界时不换行。

nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签

pre-wrap：保留空格，当文字碰到边界时换行

pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

direction: 规定文本的方向

ltr 默认，文本方向从左到右。

rtl 文本方向从右到左。

text-align: 文本的水平对齐方式

left

center

right

vertical-align: 文本所在行高的垂直对齐方式

baseline 默认

sub 垂直对齐文本的下标，和<sub>标签一样的效果

super 垂直对齐文本的上标，和<sup>标签一样的效果

top 对象的顶端与所在容器的顶端对齐

text-top 对象的顶端与所在行文字顶端对齐

middle 元素对象基于基线垂直对齐

bottom 对象的底端与所在行的文字底部对齐

text-bottom 对象的底端与所在行文字的底端对齐

text-indent: 文本首行缩进

用于一段文字首行缩进，例:text-indent:30px;

letter-spacing: 添加字母之间的空白

设置字母之间的距离，例：letter-spacing:5px;表示各字母之间相距5px。

word-spacing: 添加每个单词之间的空白

值为数值型，单位px。

text-transform: 属性控制文本的大小写

capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母，全部转化为大写字母。

lowercase 定义仅有小写字母，全部转化为小写字母。

text-overflow: 文本溢出样式通常与overflow:hidden一起使用

clip 修剪文本。

ellipsis 显示省略符号...来代表被修剪的文本。

text-decoration: 文本的修饰

none 去掉下下划线/上线/删除线。

underline 下划线。

overline 上划线。

line-through 中线。

text-shadow：文本阴影

第一个参数是左右位置

第二个参数是上下位置

第三个参数是虚化效果

第四个参数是颜色

text-shadow: 5px 5px 5px #888;