CSS 文本样式

CSS 提供了一系列专门控制文本外观的属性——从对齐方式到行高、从装饰线到字符间距。

text-align — 水平对齐

控制文本在其容器内的水平对齐方式：

css 
.left { text-align: left; }       /* 左对齐（默认） */
.center { text-align: center; }   /* 居中 */
.right { text-align: right; }     /* 右对齐 */
.justify { text-align: justify; } /* 两端对齐 */

justify 会让文字在左右两端均匀分布，适用于长段落。但对单行文字无效，对窄列的英文排版可能产生过多空隙。

line-height — 行高

控制文本行之间的垂直距离。直接影响可读性：

css 
body {
  line-height: 1.75;
}

h1 {
  line-height: 1.2;
}

line-height 可以使用以下值：

值类型示例说明
数字（推荐）1.5相对于当前字体大小的倍数，可继承
长度24px固定高度
百分比150%相对于字体大小的百分比

推荐对 line-height 使用纯数字（如 1.75），这样它会随字体大小成比例缩放。正文一般设置在 1.51.75 之间，标题在 1.21.4 之间。

text-decoration — 文本装饰

控制文本的装饰线——下划线、删除线等：

css 
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; } /* 删除线 */
.overline { text-decoration: overline; }         /* 上划线 */
.no-decoration { text-decoration: none; }        /* 去掉装饰（常用于链接） */

/* 组合：红色波浪下划线 */
.error {
  text-decoration: underline wavy #ef4444;
}

/* 精细控制 */
.special {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: #2563eb;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px; /* 下划线与文字的距离 */
}

text-transform — 大小写转换

css 
.uppercase { text-transform: uppercase; } /* 全部大写 */
.lowercase { text-transform: lowercase; } /* 全部小写 */
.capitalize { text-transform: capitalize; } /* 每个单词首字母大写 */

text-transform 只改变视觉呈现，不会修改 HTML 中的原始文本。对屏幕阅读器和 SEO 来说，文本保持原始大小写不变。

letter-spacing / word-spacing — 字符间距

css 
.tight { letter-spacing: -0.5px; }   /* 收紧 */
.loose { letter-spacing: 0.5px; }    /* 放松 */
.heading { letter-spacing: 0.05em; } /* 标题常用微间距 */

.word-spacing-demo { word-spacing: 4px; }

white-space — 空白符处理

控制空格、换行的处理方式：

值合并空格自动换行保留换行符
normal是是否（默认）
nowrap是否否
pre否否是
pre-wrap否是是
pre-line是是是
css 
/* 单行文本溢出省略 */
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 保留代码格式 */
code {
  white-space: pre-wrap;
}

text-indent — 首行缩进

css 
p {
  text-indent: 2em; /* 首行缩进两个字符宽度 */
}

word-break / overflow-wrap — 断词

当长单词或长 URL 超出容器时：

css 
/* 允许在任意字符间断行（适合 CJK + 英文混排） */
.break-all { word-break: break-all; }

/* 只在单词间换行（更自然） */
.break-word { overflow-wrap: break-word; }

overflow-wrap: break-word 更为温和——只在单词确实装不下时才断开，优先在自然断点换行。

vertical-align — 垂直对齐（行内）

控制行内元素或表格单元格的垂直对齐方式：

css 
.baseline { vertical-align: baseline; }   /* 基线对齐（默认） */
.sub { vertical-align: sub; }             /* 下标 */
.super { vertical-align: super; }         /* 上标 */
.top { vertical-align: top; }             /* 顶部对齐 */
.middle { vertical-align: middle; }       /* 中部对齐 */
.bottom { vertical-align: bottom; }       /* 底部对齐 */

vertical-align 只对行内元素和表格单元格生效，对块级元素无效。不能用来垂直居中一个 div——块级元素的垂直居中应使用 Flexbox 或 Grid。

文本排版最佳实践

css 
body {
  /* 提升可读性的基础文本设置 */
  font-size: 16px;
  line-height: 1.75;
  color: #1e293b;
}

/* 以下为可选增强，权衡性能与视觉效果后决定是否启用 */
.enhanced {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

text-rendering: optimizeLegibility 启用连字和字距优化后，大量文本可能产生可感知的渲染性能开销；-webkit-font-smoothing: antialiased 在非 Retina 屏幕上可能让细字体显得模糊。这两个属性是可选的视觉增强项，按需启用即可。