第四章 · 4.2 节

文本属性

字体属性决定字符本身的样子，文本属性则决定字符在行与段落中如何排布。行高、对齐、字间距这几个属性组合起来，直接决定了一段文字读起来"舒不舒服"。

line-height 行高

line-height 是排版中最容易被低估的属性——正文行高通常建议在 1.5–1.8 之间，行高过小会让多行文字显得拥挤，过大则打断阅读的连贯性。

p { line-height: 1.6; } /* 无单位数值，相对自身 font-size 计算，推荐写法 */

line-height 对比

line-height: 1.1 —— 多行文字挤在一起，阅读时容易串行，压迫感强。

line-height: 1.7 —— 行间留白充足，多行文字阅读起来更轻松从容。

提示无单位数值（如 1.6）优于带单位的值（如 24px）——前者是比例，子元素继承时会按各自字号重新计算；后者是固定值，子元素字号变化时行高不会跟着调整，容易导致嵌套结构里的行高错乱。

text-align 与 text-indent

属性	常用取值	说明
text-align	left / center / right / justify	justify 两端对齐，中文排版中较少使用，容易产生不均匀的字间距
text-indent	如 2em	首行缩进，中文排版常用 2em 模拟两个汉字的缩进

letter-spacing 与 word-spacing

.kicker { letter-spacing: 0.12em; text-transform: uppercase; }

letter-spacing 效果

wide letter spacing

字母间距加宽常见于小号大写字母（如标签、导航），能提升可读性；正文中一般不建议调整，浏览器的默认字距经过字体设计者精心调校。

text-decoration

现代写法把下划线拆成三个可独立控制的子属性，可以精细调整下划线的样式与颜色，而不必依赖字体自带的下划线粗细。

a {
  text-decoration-line: underline;
  text-decoration-color: var(--accent2);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px; /* 下划线与文字基线的距离 */
}

text-transform

取值	效果
uppercase	全部转为大写
lowercase	全部转为小写
capitalize	每个单词首字母大写

提示text-transform 只影响显示效果，不改变 HTML 中的原始文本内容，复制粘贴时得到的仍是原文，这一点优于在数据层直接转换大小写。

文本溢出处理

单行文本超出容器时截断并显示省略号，是列表、卡片标题的高频需求：

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行截断需要借助 WebKit 私有的行数裁剪属性（目前主流浏览器均已支持）：

.desc {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示 2 行，超出部分省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

常见误区

单行省略只写了 text-overflow: ellipsis，却忘记同时设置 overflow: hidden 与 white-space: nowrap——三者缺一不可。
行高用固定像素值，导致组件内字号调整（如响应式缩放）后行高比例失调。
中文正文使用 text-align: justify，可能因为浏览器实现差异产生忽宽忽窄的字间距，中文排版通常保持左对齐即可。