缩进文本 text-indent
元素的第一行缩进一个指定长度。
缩进可以使用所有的长度单位,当使用百分数时,是表示对于其父元素的宽度进行缩进。
p{text-indent: 2em}
div{width: 600px}
div p{text-indent: 10%}
水平对齐 text-align
关键字:left center right justify inherit
行高 line-height
行高和字体大小的差值就是行间距
关键字:normal(表示font-size的1.2倍) inherit
用相对长度表示行高时,其计算值是取父元素font-size然后乘以相对值。
div{font-size: 20px}
div p{line-height: 5em} /* 行高为20*5=100px */
使用缩放因子处理行高
使用缩放因子处理行高时,在父元素设置缩放因子,子元素设置font-size。行高值是子元素的font-size乘以父元素的缩放因子。
缩放因子是阿拉伯数字,没有单位。
div{line-height: 1.5}
div p{font-size: 18px}
垂直文本对齐 vertical-align
关键字:baseline | sub | super | bottom | top | text-top | text-bottom | middle | inherit
baseline要求元素的基线与其父元素基线对齐。
sub使其基线相对父元素基线降低,使元素变为下标。super与sub相反。
bottom使元素内框的低端与行框的低端对齐。top与bottom相反。
middle会把行内元素框框的中点和其父元素的基线上方0.5ex处的店对齐。
百分数:百分数会把元素的基线相对于其父元素的基线升高和降低指定的量。
具体数值:如5px或-5px,表示把指定的元素与对齐前升高(+)或降低(-)5px。
字间隔 word-spacing
word-spacing用于修改字间的间隔。字是不包含空白符的字符串,多个字由空白符隔开。
p{word-spacing: 4em;}
字母间隔 letter-spacing
p{letter-spacing: 1em;}
文本转换 text-transform
关键字:uppercase 转换为大写 lowercase 转换为小写 capitalize 每个单词首字母大写
p{text-transform: uppercase};
文本装饰 text-decoration
关键字:underline下划线 overline上划线 line-through贯穿现
p{text-decoration: line-through};
空白符处理 white-space
关键字:默认normal:将所有空白符合并为一个,忽略元素的换行。
pre:保留空白符,保留换行,不允许自动换行。 nowrap:合并空白符,忽略换行,不允许自动换行。
pre-wrap:保留空白符,保留换行,允许自动换行。 pre-line:合并空白符,保留换行,允许自动换行。
文本方向 direction
关键字:ltr rtl