刘信华很多人做前端好几年，CSS布局属性背得滚瓜烂熟，遇到“文字垂直居中”还是条件反射地用 flex。这不是大家不够勤奋，而是 CSS Text（文本）这一路属性在设计之初就不是为了“把字摆正”这样表面的需求，它管的是浏览器排版引擎在一段字符流里如何确定每个字的位置、每一行从哪里断开、溢出后怎么表现、装饰线画在哪一层。理解到这一层，你会发现很多“背过但用不好”的属性其实是有内在规律的。
这篇文章我不打算写成属性字典，而是按照我实际排页面时踩过坑、验证过的路径来梳理文本排版。适合刚入门前端但已经能写简单页面的人，也适合写了两三年 CSS 但总是被 line-height、vertical-align、text-overflow 折磨的开发者。核心目的只有一个：让你看完之后，再遇到文本相关的样式需求时，不是去搜索引擎现查，而是能自己推出来结果。
1. 先理解文本排版的最小单位：行盒与字形盒
1.1 一段文本在渲染前到底经历了什么
我们写 <p>你好，世界</p>，浏览器不会直接把文字一个个“贴”在页面上。文本会先被拆成字符，字符再根据字体文件映射成对应的字形（glyph），每个字形落在一个看不见的矩形——em盒（em box）里。em盒的高度由当前 font-size 决定，比如 font-size: 16px，理论上 em 盒高度就是 16px，但实际字形的绘制区域可能比它高，也可能比它矮。
接着，同一行内所有的行内盒子（inline box）会在一个叫行盒（line box）的容器里做垂直排列。行盒的高度由内容物决定——通常是行内最高的那个 em 盒加上半行距。你设置的每个属性，本质上都在干预这个“把字形放进盒子、盒子排进行盒”的过程。
理解这个机制很重要，否则你无法解释下面这个经典场景：给一个内联元素加 background-color，背景色明明盖住了文字，但上下总会多出一点色块；或者给一段文字加 border，结果边框和文字之间的空隙怎么调都怪。这些不是浏览器 bug，而是字形盒和行盒本来就不完全重合。
我在实际定位这类问题时，会先在 DevTools 里把 line-height 改成 1，再看元素盒模型。大多数“文字被背景切了”“上下空间不一致”的问题，在这一步就能看出端倪：当 line-height: 1 时行盒高度等于 font-size，如果背景还有多余高度，说明是字体自身 ascent/descent 带的；如果背景不够盖住文字，说明字形绘制区域超过了 font-size。
1.2 line-height 不是“行高”加了就完事
line-height 接受数字、长度值和百分比。多数项目规范会建议用纯数字，比如 line-height: 1.5。为什么？因为纯数字会被所有子元素继承，子元素根据自己的 font-size 重新计算行高；而百分比和固定长度值会先算成具体像素，子元素继承的是像素值，一旦子元素字号变大，行高就显得挤。
这个坑我在维护老项目时遇到太多次了：根节点写了 line-height: 150%，里面某个用了 font-size: 24px 的标题，行高还是 16px × 150% = 24px，大标题文字直接叠在一起。改成纯数字后，所有嵌套字号各自乘 1.5，问题立刻消失。
但纯数字也不是万能。要考虑中文字体时，很多中文字体（如微软雅黑、思源黑体）自身的上下留白比较大，line-height: 1.5 看起来会比同等西文字体更松。这时候需要针对中文字体单独微调，或者用 1.4 这类偏小的值。不要追求某个全局变量搞定所有字体，排版引擎处理 CJK 字形和拉丁字形时，内部的 line gap 本身就不是一套逻辑。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 行高、基线对齐、垂直居中：布局里最容易被误用的三件事
2.1 vertical-align 的默认值是基线，不是中线
很多人在行内元素里插一个 <img>，发现图片底部和文字底部对不齐，总差几像素。原因就是 vertical-align 默认值是 baseline（基线），而基线是拉丁字母 x 底部那条线，不是盒子的下边缘。图片没有基线概念，它的 baseline 是元素底边。于是图片底边被迫和文字基线重合，视觉上就“浮起来”了。
最常见的解法是给图片设置 vertical-align: middle，但 middle 不是基线中间，而是父元素基线上方 0.5ex 的位置（ex 是当前字体 x 字母高度），不同字体下效果仍有偏差。如果你希望图标和文字真正视觉居中，更稳的做法是让二者都在一个 flex 容器里，用 align-items: center；如果必须保留 inline 布局，那就给图标容器固定宽高，用 vertical-align 和 line-height 一起调，再不行用 transform 微调几像素，别嫌麻烦。
2.2 单行文本垂直居中的原理：半行距的加减
页面里最常见的需求其实是按钮里的文字水平垂直居中。水平方向用 text-align: center 或 flex 都行，垂直方向很多教程会说“给容器设置 line-height 等于容器高度”。
我解释下原理：line box 高度等于 line-height，而 em 盒内容在这条行高里是上下各分一半“额外空隙”的。文字像素实际画在字形盒里，字形盒顶端和行盒顶端之间有一段称为上半行距的距离。当容器高度等于行高时，行盒被撑满，左右两侧没有多余像素，字形视觉上就接近居中。要注意：如果用 height 写了 40px，line-height 也写 40px，此时 content-box 高度就是 40px，行盒是 40px，效果成立。如果同时设了 padding，那行高加 padding 会超过容器高度，文字会居中偏下或偏上，先算出总内容高度再决定字号。
另外，这类技法只对单行文本可靠。多行文本用等值 line-height 的方法是灾难，因为每行文本的行高叠加后会把容器撑爆。多行垂直居中优先用 flex + align-items: center；如果必须兼容非常老的浏览器，可以模拟 table-cell 的方式：外层 display: table，内层 display: table-cell + vertical-align: middle。
2.3 汉字和数字混排时，基线不一致怎么办
金融报表、数据大屏经常遇到“13.5 元”“1,200人”这种混排。中文用思源黑体，数字用 Helvetica 或其他西文字体，基线相似但字形中心不同，混排后文字会显得上下跳动。解决思路是给数字和中文用统一的字体栈，让数字回退到中文里包含的数字字形，而不是单独指定一个西文字体。
中文项目里比较稳的 font-family 写法是："PingFang SC", "HarmonicOS Sans SC", "Microsoft YaHei", sans-serif，然后数字部分不单独设置字体，利用当前字体自带的拉丁字形渲染。如果设计稿明确要求数字用特殊字体，则要给数字所在元素设置一套能和中文字体基线和谐共存的西文字体，并微调 padding-bottom 或 transform: translateY()，没有银弹。
3. 换行、断词与溢出截断：三组易混属性的取舍逻辑
3.1 white-space 是五个值背后的两个开关
white-space 经常有人记不全，其实拆开就是两个开关：空白符压缩、换行符保留，外加自动换行是否开启。
normal：压缩连续空格，忽略源码里的换行符，允许在空格处自动换行。nowrap：和 normal 相同，但禁止自动换行，文字一直横向延伸。pre：保留空格和换行，就像 HTML 的<pre>，但允许超出容器后溢出，不会自动换行。pre-wrap：保留空格和换行，且允许自动换行，适合展示带缩进格式的代码或诗歌。pre-line：合并连续空格，但保留换行符，并且允许自动换行。
实际使用中，我经常把 white-space: nowrap 和 text-overflow: ellipsis 一起用实现单行省略号，它是截断的核心前提。而 pre-wrap 适合粘贴中带换行的用户评论、统计消息，能避免用户输入里的换行被吞掉。
还有个隐形坑：当元素设了 white-space: nowrap 且父容器宽度不够时，整个行盒会越过父容器，但不会撑开 flex 项目，除非父容器设置了 min-width: 0。这对应很多人在 flex 子元素里做“文字超长省略号”不生效，八成是子元素默认的 min-width: auto 导致它不愿意收缩，给子元素加上 min-width: 0 后一切恢复正常。
3.2 word-break、overflow-wrap 和中文断行
涉及长单词、URL、中英文混排时，word-break 和 overflow-wrap 是一对容易被弄混的兄弟。
overflow-wrap: break-word 的意思是：一个单词实在放不下时，可以在这个单词内部拆开换行，但只有在整行都装不下时才会拆，平时尽量把长词整体塞到下一行。word-break: break-all 则更暴力，只要当前行放不下任意字符，就立刻断开，不需要拆词。两者对英文长 URL 的差异非常明显：break-all 会让 URL 在任何字符处断掉，有时会出现“前面留一点空，但后半截已经断下去”的难看效果；break-word 则倾向于把整个 URL 移到下一行再拆，视觉更友好。
中文换行则有另一个规则：中日韩文本默认允许在字符之间任意断行，不会出现单词拆不拆的问题，但会遇到标点悬挂规则——句号、逗号不能出现在行首。由浏览器默认处理，现代浏览器基本兼容。如果你在项目里发现中文标点真的顶到了行首，检查一下是不是用了 word-break: break-all，它会破坏标点避首尾规则，中文不建议开 break-all。
3.3 单行省略号和多行截断，正确姿势是什么
单行文本省略号是这个领域里最经典的组合：
css复制.truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
三个条件缺一不可。overflow 必须是非 visible 才能让 text-overflow 生效；nowrap 保证不换行；text-overflow 决定超出的内容用省略号还是用裁剪。注意 text-overflow 只对块级或 inline-block 容器中的一行文本有效，不能直接应用在 flex 容器或 grid 容器上用这个方式省略。
多行省略号则依赖 WebKit 的私有属性：
css复制.clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
这套属性现在主流浏览器都支持。原理是把元素改造成一个 WebKit 盒模型，line-clamp 限制显示行数，等结束后在末尾加上省略号。缺点是当文本里有 `` 等结构时，省略号位置可能不准确。如果追求跨浏览器一致性和更精确的省略号，可以用 JS 测量文本高度后二分查找字符数，或者用 max-height 配渐变背景遮罩模拟“淡出”效果，后者在列表卡片里视觉反而更柔和。
3.4 容器宽度和 flex 布局对文本溢出的连锁影响
很多开发者只记住了单行省略号，却忘了检查父级容器的 width 或 flex: 1 是否真的约束住了。在 flex 布局中，一个子项的默认 min-width: auto 会让它不愿意小于内容的固有宽度。如果里面有长文本，子项就会被撑开，flex 容器的整体宽度失衡。
处理办法并不玄学：给需要压缩的文字容器单独加 min-width: 0，或给允许收缩的列加上 flex: 1 且不要忘记 min-width。Grid 布局中则要留意 minmax(0, 1fr) 的写法，普通 1fr 等价于 minmax(auto, 1fr)，同样会因为 min-content 导致溢出。这些坑在数据表格、多列卡片里非常常见，而且表现出来就是“为什么我的省略号一直在换行而不是出现”。
4. 文字装饰与“特效级”外观：从删除线到渐变字体
4.1 text-decoration 是一项独立体系
很多人只知道 text-decoration 能加下划线，而且下意识以为它是 border-bottom 的替身。实际上 text-decoration 是独立的一组属性：text-decoration-line（下划线、删除线、上划线）、text-decoration-style（实线、波浪线、虚线）、text-decoration-color、text-decoration-thickness。CSS 里用 text-decoration: underline wavy red 2px 这种简写可以一次设定全部。
常用下划线时，text-decoration 的线默认会穿过部分字母的下伸部（比如 p、y、j），并且贴合基线。要控制下划线和文字的距离，需要用 text-underline-offset，也可以结合 text-decoration-thickness 调整粗细。这个细节在页面里做链接 hover 样式时特别重要：
css复制a {
text-decoration: underline;
text-decoration-color: rgba(0, 0, 0, 0.3);
text-underline-offset: 4px;
text-decoration-thickness: 1.5px;
}
a:hover {
text-decoration-color: currentColor;
}
这样下划线默认淡色、hover 时变深，又不会和字体笔画混在一起。很多人嫌弃下划线丑的时候会用 border-bottom，但 border-bottom 是不跟随文字折行的，多行文本的每一行下边框只能在整块元素底部，不会逐行出现。所以遇到多行文案需要逐行画线时，text-decoration 反而更正确。
4.2 渐变文字、描边文字和镂空文字的纯 CSS 实现
热门搜索里“css 字体渐变”出现频率极高。原理非常简单：先利用 background-clip: text 把背景裁剪到文字形状内，再让文字颜色变成透明，让背景透出来。
css复制.gradient-text {
background: linear-gradient(90deg, #ff6a00, #ee0979);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
支持度目前很广，注意要给不支持 background-clip: text 的浏览器准备一个纯色回退。做法是先写 color，再写带 background-clip 的样式，不支持的浏览器会保留 color，而不是变成不可见文字。另外，背景裁剪到文字后，如果文字里包含 emoji 或某些特殊字体字形，裁剪区域可能异常，最好用纯色或简单渐变，不要用复杂的背景图片。
描边文字则用 -webkit-text-stroke：
css复制.outlined-text {
-webkit-text-stroke: 2px #333;
color: transparent;
}
text-stroke 默认是居中描边，会让字形粗细有变化。想要外描边效果时，用 text-shadow 模拟四周影子更可控：text-shadow: 0 0 4px #fff, 0 0 4px #fff，这是实现小标题发光或描边的老方案。
4.3 竖排文字也需要 CSS 文本属性支持
中文海报、古籍引用、侧边栏标签时不时需要竖排。方式不是把每个字之间堆 ``，而是用 writing-mode 切换文档流方向：
css复制.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
}
vertical-rl 表示内容从右向左竖排，最接近中文传统阅读习惯。只设定 writing-mode 时，拉丁字母和数字默认会旋转 90 度横躺，配合 text-orientation: upright 可以让它们保持正立，竖排里的 “CSS” 三个字母不至于歪着头。
这个场景里，text-align 方向和横向时相反。横向文本里 text-align: right 是把文字推到右边，竖排时则会把每一行的起点推到“上方”，需要自己调一下。初次使用竖排属性的人经常困惑为什么设置了 text-align 却变化不大，因为这取决于你当前的 writing-mode。
4.4 鼠标移入时的文字互动效果
搜索热词里也很多人关注 “css 鼠标移入事件”，本质上不是事件，而是 :hover 状态配合 CSS 过渡。
文本本身不能像图片一样平滑渐变颜色，但可以用 background-size 位移实现底纹扫过文字的效果：
css复制.menu-item {
background: linear-gradient(currentColor, currentColor) left bottom / 0% 2px no-repeat;
transition: background-size 0.3s;
}
.menu-item:hover {
background-size: 100% 2px;
}
这样下划线会从左往右“生长”出来，不用新增 DOM。用渐变背景模拟底纹扫字也是同理。需要注意 currentColor 在背景里的语义：它会跟随元素的 color 值变化，hover 时如果 color 变亮，线条也会跟着变，整体颜色统一，很方便。
5. 中文内容换行如何避免选错字体和行距
5.1 中文字体的排版坑：font-family 后面的 fallback 比主字体更重要
在中文网站里，font-family 的核心是两个目的：让中文使用视觉效果统一的中文字体，同时确保数字字母优先用更容易识别的字形。实际项目里很少能对中文字体做任何修改，因为中文字体文件动辄几 MB，没有合适字体子集裁剪手段时，尽量使用系统已有字体。
推荐一个面向国内环境的字体栈：
css复制body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
"Helvetica Neue", Helvetica, Arial, sans-serif;
}
这个栈里数字和字母会优先选择西文字体（Segoe UI / Helvetica），中文回退到 PingFang SC / 微软雅黑。但如果你希望数字也有中文设计味道，桌面端和移动端分别调整即可。实际测试时要注意：Mac 上没有 Microsoft YaHei，会依次落回 PingFang；Windows 上没有 PingFang，又落回微软雅黑。平时开发在 Mac 上看着舒服，不代表 Windows 上没问题，有条件最好用 Windows 虚拟机或远程机实测一次。
5.2 letter-spacing 在中文里不是等距的
letter-spacing 会让字符间距整体增加，但这玩意儿在中文里的表现和英文不同。中文每个字符天然是方块字，加上 letter-spacing 后文字之间的空白会比较均匀，适合做标题。但如果应用到正文，中文排版的行长较短时，增加 letter-spacing 很容易让长句提前折行，需要同时考虑容器的最大宽度。
此外，letter-spacing 会把间距加在最后一个字符后面，导致“文字块右边缘多一个空格”。在居中、右对齐时影响不大，但当你用 letter-spacing 做“两端对齐”或用它配合 text-indent 时，最右边总会多出一点留白。解决方式要么接受，要么给容器同时设置等值负 margin，要么干脆用 padding-left 补偿。做像素级还原时尤其要留意。
段落缩进我用的是 text-indent: 2em。注意 em 是相对当前字号计算的，如果标题里面有富文本标签或图片，text-indent 会作用于第一行行首，第二行开始不生效。要保持首行缩进只作用于文字，最好直接写在段落标签上，不要写在父容器。
5.3 text-align: justify 两端对齐并不适合所有文本
英文正文里常常用 justify 实现两端对齐，带来整洁的边缘线。中文由于字符宽度整齐，两端对齐通常会把标点和最后一个字拉伸，形成某些行之间空隙过大的问题。现代浏览器对中文 justify 的处理好了很多，但遇到一个字后面是引号、括号时，仍可能出现明显空隙。
如果设计稿要求段落看起来整齐，我会先试 justify，把 text-align-last 设为 left，这样最后一行不会被强制拉伸成通栏。最后一段自然左对齐，其它段落在字符间分散空隙。
css复制p {
text-align: justify;
text-align-last: left;
}
实测下来，中文正文用 justify 到底好不好看，很大程度取决于字宽和字体。思源宋体对 justify 的兼容比思源黑体更平滑，因为衬线字体的笔划更丰富，不易察觉空隙。大屏、卡片里的一句话文案就不要 justify 了，左对齐就好。
6. 浏览器渲染文本的一些隐藏细节
6.1 同字号同行高，为什么不同系统下看起来不一样
CSS 标准只规定字体有 font-size，字形本身的高度由字体设计决定。chrome 在 Windows 上如果开启的是默认“文本缩放”或系统字体渲染策略不同，同一行字实际视觉高度差异可以到 2-3px。Firefox 和 Safari 使用不同的字体落回顺序，同一 font-family 在 Mac 上第一候选是 PingFang SC，在 Windows 上第一候选可能是 Microsoft YaHei，两款字体的 ascent/descent 差距很明显。
跨浏览器做像素级还原时，用统一的 font stack 并不能完全消除差异。更可靠的是把行高设成整数值，并且用固定高度容器，而不是让高度自动撑开。如果必须精确到像素，可以在关键文本节点上使用工具类强制字体：
css复制.text-stable {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
line-height: 1.4;
}
但也要明白，这种强制的代价是放弃部分平台的最优渲染。实际项目中我并不追求完全一致，控制在视觉偏差 1px 内即可，过度控制只会影响开发效率。
6.2 文本渲染与动画性能：transform 尽量别作用于大段文字
文本本身是普通 DOM，它的重绘和任何元素一样，涉及 layout、paint、composite。给大段文字容器加上 transform 做位移动画时，浏览器会启动复合层，把文本层直接做 GPU 合成。大多数情况下很流畅，但如果这段文字在滚动容器内、文本很长或者尺寸经常变化，合成层可能会频繁重绘，反而增加内存占用。
还有一种情况是给文本加 text-shadow 加得太重，尤其配合模糊值很大的阴影，这类效果在滚动时会持续触发重绘。对动画里的文字，优先用 opacity 和 transform 进行整体移动，不要在动画过程中不断改变 font-size、letter-spacing 或 word-spacing，这些属性每一个变化都可能触发整块文本重新排版。字体平滑方面，Windows 上通常使用系统默认 cleartype，Mac 上使用亚像素抗锯齿。但移动端和高分屏下亚像素效果有限，所以也不要在 CSS 里硬写成 -webkit-font-smoothing: antialiased，这会影响字体整体观感，尤其在暗色背景下。
最后说点实在的
写这篇文章时，我刻意没有把属性列表铺开，而是按照“文本如何进入行盒、如何垂直对齐、如何处理换行溢出、如何加装饰与特效、如何和中文排版结合”这条链路走。这是我在实际开发中最常用的思考路径。文本排版的很多属性在普通页面里看不到明显差异，一旦到了数据报表、文章阅读页、多语言站点等文本密集场景，每一个细节都在考验你对底层机制的理解深度。如果只能留一条建议：先把你项目里的 line-height 全部改成纯数字，再检查所有中文文本的 font-family 回退链，这俩能解决一半以上的文本显示问题。剩余的坑，基本都是浏览器行为差异，建议准备一个公共的文本工具类，统一收纳，别散落到各处组件里。