缩进和水平对齐
缩进文本:text-indent
- 可以设置为负值
- 可以为所有块级元素应用,但无法应用到行内元素,图像之类的替换元素;
水平对齐: text-align
left,center,right,justify
- 只应用到块级元素
垂直对齐
行高: line-height
- 指的是文本行基线之间的距离,而不是字体的大小;它确定了将各个元素框的高度增加或减少多少
- line-height值和字体大小只差就是行间距
文本行
- 文本行中的每一个元素都会生成一个内容区,这由字体的大小确定;
- 这个内容区会生成一个行内框(line-height),行间距会影响行内框高度
- 行间距可以是负的,行间距+内容区=行内框
垂直对齐文本: vertical-align
- 值:
baseline, sub, super, bottom, text-bottom, middle, top, text-top
- 只应用于行内元素和替换元素; 不影响块级元素中的内容对齐,不过可以影响表单元素中元素的垂直对齐
- 基线对齐: baseline: 子元素的基线和父元素的基线对齐;
- 上标和下标:sub,super,相对于基线,并没有明确的定义;距离取决于用户代理
- 底端对齐: bottom,将元素行内框的底端与行框的底端对齐;text-bottom: 指的事行内文本的底端;
- 顶端对齐: top, text-top
- 居中对齐: middle, 往往应用于图像
- 百分数:会把元素的基线相对于父元素的基线升高或降低
- 长度对齐: 同上,不过是具体的高度
字间隔和字母间隔
字间隔: word-spacing
字母间隔:letter-spacing
间隔和对齐
- 如果一个文本设置两端对齐且没有设置
letter-spacing
或设置为normal
,则字母和字的距离会调整
- 如果设置了
letter-spacing
则不会受text-align
影响
文本转换, text-transform
uppercase, lowercase, capitalize
文本装饰, text-decoration
underline,overline,line-through, blink,none
- 不被继承,但仍可能会有‘穿过’的现象
文本阴影
text-shadow: color offset-x offset-y [blur-radius]
- color可以放在最前或最后
- 可以重复
处理空白符: white-space
-
nowrap
: 不允许自动换行,除非使用了br
元素
-
pre
: 保留空格和换行,不允许自动换行
-
pre-wrap
: 保留额外的空格和换行,不允许自动换行
-
pre-line
: 保留换行,不保留额外空白,允许自动换行
文本方向: direction
- 值:
ltr
,rtl
- 影响块级元素中文本的书写方向,表中列布局的方向,内容水平填充其元素框的方向以及两端对齐元素中最后一行的位置
- 对于行内元素,只有
unicode-bidi
属性设置为embed
或bidi-override
时才会应用direction
属性;