文本属性

  • text-indent: 文本缩进。
    • 注意只能用于块级元素;
    • 子元素使用百分数等相关声明值的时候孙子元素继承的是具体值;
  • text-align: 对齐方式。
    • left、center、right、justify 这几个属性;
    • justify 的含义是两边缘对齐, 中间用空格填补;
  • line-height: 行高。
    • 行高与 font-size 之差为行间距;
    • 默认值为 'normal', 开发组件时尽量每一个元素根节点都带上 line-height 属性,避免被全局样式影响。
    • 文本垂直居中可以这样写:
.demo {
font-size: 13px;
line-height: 13px;
}
/* 效果等于 */
.demo {
font-size: 13px;
line-height: 1;
}
  • vertical-align: 垂直对齐文本。
    • 适用于行内元素以及表格元素;
    • 后面跟百分数是相对使用该属性节点本身 line-height 计算的;

解答: vertical-align 默认属性是 baseline, 多出的高度是「幽灵空白节点」的 line-height 的占位。详细解答可见 CSS 深入理解 vertical-align 和 line-height 的基友关系

  • text-transform: 文本转换。
    • uppercaselowercasecapitalize
  • text-decration: 文本装饰。
    • underlineouterlineline-through;
    • 该属性不会继承;
  • white-space: 处理换行符。
    • 其属性值见下列表格, 不太好记忆, 用得最多的是 normal(默认) 以及 nowrap, 大体知道带 pre 的是会保留换行符的, 用到的时候查表。
空白符换行符自动换行
normal合并忽略允许
nowrap合并忽略不允许
pre保留保留不允许
pre-line合并保留允许
pre-wrap保留保留允许