写CSS写久了，你会慢慢发现一个很有意思的现象：真正让页面看起来“高级”的，往往不是复杂酷炫的3D动画，而是最容易被忽略的文本排版。字体大小、行高、字间距、省略号、两端对齐……这些看似“基础到不值一提”的细节，恰恰是前端面试和实际开发中反复出题的重灾区。CSS3里跟文本相关的属性一套组合拳打下来，不仅能让你立刻脱离“只会堆div”的尴尬期，还能顺手解决一批面试官最爱问的经典题。
这篇文章就是我自己的实践总结。我会按“属性拆解 + 案例实现 + 避坑实录”的顺序，把CSS3文本样式体系完整过一遍。内容对纯小白友好，学过一点点HTML但不知道CSS怎么用的朋友也能跟上；想冲刺实习岗位、准备前端面试的朋友更值得多看几遍踩坑总结，里面的错误示例全是真实项目里出现过的写法。
1. 为什么我把CSS3文本样式当成入门第一道门
1.1 文本样式是前端开发的“基本盘”
几乎所有网页里，文字都占据至少80%的信息量。你不是在排版这段文字，就是在排版下一段文字。如果一个新手能把团队的文本基础样式吃透，再看组里的大佬写组件、写布局，会发现自己少了一层理解障碍。反过来，很多培训班出来的同学缺口恰恰在这里：flex和grid背得滚瓜烂熟，问一句“line-height用百分比和用无单位数字有什么区别”，整个人就卡住了。
文本样式看似零散，其实自成体系。从字体本身（font-size、font-family、font-weight）到段落排版（text-align、text-indent、line-height），再到高端一点的溢出处理（text-overflow、word-break）和特效文字（text-shadow、渐变文字），这些属性单独拎出来都不难，难的是组合使用。组合得好，页面会显得干净、专业、有层次；组合不好，字体挤成一团或者大段文字溢出容器，观感直接崩塌。
1.2 这套技能到底能解决什么典型问题
举个最常见的例子：产品经理丢过来一张设计图，里面有个卡片，标题一行放不下要省略号，时间戳右下角对齐，正文三行之后也要省略，然后再加一点阴影。新手拿到这张图，二话不说先上flex布局，结果发现省略号死活出不来。看完这篇文章你再遇到这种需求，脑子里第一时间应该反应出来的是三件套：white-space: nowrap、overflow: hidden、text-overflow: ellipsis，多行文本再加-webkit-line-clamp。这，就是成体系学习和碎片化刷帖最大的区别。
另一个典型场景是移动端。手机浏览器默认会把字号放大到能看的程度，中文网站尤其明显。如果你没处理-webkit-text-size-adjust，写死的小字号在部分安卓机上会被强行放大，布局当场错乱。这类问题不踩一次坑很难意识到，但踩完之后你就再也不会忘记。本文的避坑指南部分会重点讲这类情况。
1.3 适合谁阅读，需要什么基础
这篇文章适合零基础或基础薄弱的前端学习者，也适合正在准备前端面试题的朋友。你只需要知道HTML里的<p>、<span>、<h1>这类标签是干什么的，就足够往下读了。后面的实操案例我会给出完整代码，你直接用浏览器打开HTML文件就能看到效果，不需要任何框架和构建工具，也不需要装Node环境。
2. CSS3文本样式属性全景拆解
2.1 字体属性：font-size、font-weight、font-style、font-family
字体属性是文本样式的地基。font-size控制字号，单位一般用px、em、rem。我个人的建议是：项目根节点用rem做弹性适配，局部组件内部用px或em，关键是要保持一致，不要同一个文件里混用三套单位，后面自己都改不动。font-weight是字重，从100到900之间的百位数，但实际上很多字体只提供400（正常）、700（加粗）、900（特粗）几个档，你写个600可能显示效果和500没区别，别被误导。
font-family的坑最多。它接受一个字体栈（font stack），浏览器会从左到右逐个检查，哪个存在就用哪个。所以你必须把最想要的字体放第一位，通用族类（sans-serif、serif、monospace）放最后兜底。我见过同事写font-family: "PingFang SC"，满心以为这能确保中文都用苹方，结果在Windows机器上全部回退成宋体。正确写法应该是：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif。这套栈从左到右兼顾了苹果系、微软系，最后用sans-serif兜底。
font-style一般只用两个值：normal和italic。粗斜体建议用font-weight: 700配合font-style: italic组合，直接写<strong>标签再改样式也行，尽量不要用浏览器模拟的倾斜，中文假斜体的渲染效果简直灾难。
2.2 段落排版属性：text-align、text-indent、text-transform、text-decoration
text-align控制水平对齐，有left、right、center、justify四个常用值。justify会让文字两端对齐，但中文场景下如果段内只有几个字，拉伸效果特别难看。所以我建议中文正文优先left，英文长段落可以酌情用justify。text-align无法直接作用于<span>这类行内元素，必须由父级块元素控制，这是个很重要的概念。
text-indent用来做首行缩进，常见值是2em，刚好缩进两个字。很多小白用空格模拟缩进，这在富文本编辑器里看没问题，一旦复制到代码里就原形毕露。字间距用letter-spacing控制，注意它支持负值，可以用来做标题字压缩，但别压太狠，否则字和字叠在一起。
text-decoration常用来控制下划线、删除线，开发中最常用的操作是去掉<a>标签默认下划线：text-decoration: none。进阶一点的技巧是设置text-decoration-color和text-decoration-thickness，让下划线的颜色和粗细跟文字区分开，这个在精修页面时很管用，很多大厂官网的“阅读全文”链接就是这么做出来的。
text-transform用于英文的大小写转换，比如uppercase、lowercase、capitalize。它只对字母有效，中文无效果。注意它只是视觉层面“看起来”变成大写，复制出来的文本还是原始内容，这个在翻译组件做国际化时需要小心，别拿text-transform当真转大小写的工具。
2.3 行高与间距：line-height 的无单位原则
line-height绝对是CSS文本体系里最值得深挖的属性，没有之一。它定义行框的高度，直接影响两行文字之间的垂直间距。属性值有四种写法：正常值normal、具体长度（px）、百分比（%）、无单位数字。其中最推荐的就是无单位数字，比如line-height: 1.5，意思是行高等于当前font-size的1.5倍。为什么推荐这个写法？因为它会随font-size的变化等比缩放。
举个例子：你给父容器设置了font-size: 16px和line-height: 1.5，那么行高是24px。如果子元素里有个词设置了font-size: 24px，行高会跟着变成36px，排版依然协调。但如果父级写的是line-height: 24px，子元素放大字体后行高还是24px，两行文字大概率会重叠，观感一下子就毁了。所以我的经验是：全局统一用无单位数字或百分比，不要用px写死行高。
同时提醒一下，百分比和无单位数字在实际效果上也有区别，区别在于子元素继承时的计算方式。百分比行高会先按父元素字号算出具体像素值，然后把这个像素值传给子元素；而无单位数字则会把数值本身传给子元素，由子元素自己按当前字号计算。由于继承规则不一样，全局默认推荐无单位数字更稳妥。
2.4 文本换行、溢出与截断控制
文本超出容器是日常开发里最普遍的噩梦。white-space属性控制空白符和换行的处理。默认值normal会自动合并多个空格，并根据需要换行；nowrap表示不换行，所有文字挤在同一行；pre保留源码里的空格和换行，效果类似于<pre>标签。做代码展示时white-space: pre或者pre-wrap很实用，做按钮、标签这类不能换行的小元素时nowrap是标配。
overflow配合text-overflow可以实现经典的单行省略号效果。text-overflow有两个常用值：clip（直接截断）和ellipsis（末尾显示省略号）。但注意，光设置text-overflow: ellipsis是不生效的，还必须搭配white-space: nowrap和overflow: hidden，三者缺一不可。这个三件套几乎是GitHub上所有前端仓库都会出现的代码，面试官也特别爱问“text-overflow的生效条件是什么”。
word-break控制单词断行。中文通常不需要特殊处理，但混合中英文时如果遇到太长的不间断英文单词，默认情况下word-break: normal会强行把整个单词挪到下一行，导致左侧留下大块空白。这时候用word-break: break-all或者overflow-wrap: break-word可以解决。两者的区别是break-all会直接在单词中间任意断行，break-word会优先尝试把整个单词放下，实在放不下才断。通常情况下overflow-wrap: break-word效果更好，因为英文单词不会被打得七零八落。
3. 只有CSS3才有的进阶样式：阴影、渐变与描边
3.1 文本阴影 text-shadow 的三种玩法
text-shadow是CSS3给文字加的“立体特效”，语法是text-shadow: 水平偏移 垂直偏移 模糊半径 颜色，四个值缺一不可。最基础的使用是做一个简单的阴影字：text-shadow: 2px 2px 4px rgba(0,0,0,0.3)，水平向右2像素，垂直向下2像素，模糊半径4像素，颜色带30%透明度。
阴影可以叠加，多个阴影用逗号分隔。一个比较实用的小技巧是多重阴影模拟描边效果：text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff，四个方向各来一道白色阴影，视觉上就形成了描边字。严格来说用-webkit-text-stroke更标准，但兼容性没有text-shadow稳，实战中四方向阴影方案在PC端几乎通杀。
第三种玩法是做“模糊字”。当阴影的模糊半径很大、偏移为0的时候，文字本身看得清但周围会有一圈光晕，比如text-shadow: 0 0 8px rgba(0, 120, 255, 0.5)，这就是赛博朋克风格按钮质感标题常用的光晕效果。网站的活动页横幅很喜欢用这种形式做标题，成本低，效果很出片。
3.2 渐变文字、背景裁切与 -webkit-text-fill-color
渐变文字很多人以为是Photoshop里做的图，其实CSS3可以纯代码实现，核心靠background-clip: text。操作分三步：第一，给文字加上渐变色背景，比如background: linear-gradient(135deg, #f00, #00f)；第二，设置-webkit-background-clip: text，把背景裁切成文字的形状；第三，设置color: transparent或者-webkit-text-fill-color: transparent，把文字本身的颜色变成透明，这样底下渐变背景才能透出来。
注意background-clip: text目前仍然需要加-webkit-前缀，很多新框架的自动补全工具会替你处理，但如果你手写样式，记得补上。这个效果特别适合做公司官网的大标题、Logo文字、数据大屏的标题栏，视觉上一下就有质感了。
-webkit-text-fill-color还可以做文字镂空效果。把文字填充色设为透明，配合text-stroke描边，出来的字就是只有边框没有填充的空心字。这种文字配合暗色背景非常漂亮，做漫画风或科技风页面的时候可以用一用。
3.3 伪元素精确控制首字和首行
CSS里有两个很有意思的伪元素：::first-letter和::first-line，分别控制块级元素的第一行和第一个字符。英文排版里经常用首字下沉增强阅读体验，在CSS里实现特别简单：给::first-letter设置一个较大的字号和float: left，效果跟杂志一模一样。
::first-line则适合控制段落第一行的样式，比如首行加大行距、加粗、变个颜色。这两个伪元素看起来小众，但在面试里偶尔会作为“追问”出现。我这里提醒一个细节：::first-line只对块级元素生效，并且跟文字排版相关的属性大部分能用，但像padding、margin这类盒模型属性不生效。
4. 实操案例：三个高频场景的完整实现
4.1 单行文本省略与多行文本省略
先写单行省略，这是必须刻进肌肉记忆的写法：
.single-line { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }容器需要设置固定宽度，否则元素会自动撑开，省略号永远不会出现。这个在弹性容器和表格里特别容易踩坑，因为宽度会被flex或table自动分配。解决思路是给元素加min-width: 0（flex子项）或者table-layout: fixed（表格），让宽度约束起效。
多行省略稍微高级一点，CSS3里主要靠-webkit-line-clamp，需要配合两个属性：
.multi-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }这个组合会把文本限制为3行，超出部分隐藏并显示省略号。注意display: -webkit-box不是标准的flex，它是WebKit内核下的老式弹性盒模型，现在专门用来配合line-clamp，虽然带前缀，但Chrome、Safari、Edge都兼容。Firefox从68版本开始也支持了，所以移动端和PC端基本可以放心用。如果你要兼容更老的浏览器，只能用JS算高度或者用伪元素盖一个省略号，这里不展开。
4.2 文字垂直居中：行高方案怎么选
小白最容易懵的就是“一行文字怎么在固定高度的盒子里垂直居中”。CSS3时代解决方案很多，但最简单的就是行高方案：父盒子设置固定高度height: 50px，然后设置line-height: 50px，文字就会自动垂直居中。原理是行框的上下空间相等，文字天然居中。这个方案只适用于单行文本，如果超过一行就会溢出，需要小心。
多行文本或者不确定内容高度时，更稳定的方案是flex布局，这也是目前的主流做法：
.center { display: flex; align-items: center; justify-content: center; height: 100px; }另外补充一个大家容易忽略的问题：中文和英文在同一行的时候，基线对齐经常对不齐，看着上下错位。这是字体各自行高和基线位置不一致导致的，一般可以在容器上设置一个统一的font-family字体栈，让浏览器对中英文分别采取最合适的字体。想要更准精确控制，可以给英文部分包一个<span>并设置vertical-align，但开发成本略高，通常全局统一字体栈就够了。
4.3 标题与正文的层级排版
一个真实的业务场景：页面里有一块新闻卡片，上面是标题，下面是摘要，右侧是时间。参考实现是这样的：
.card { width: 360px; padding: 16px; border: 1px solid #eee; border-radius: 8px; font-size: 14px; line-height: 1.6; } .card-title { font-size: 18px; font-weight: 700; line-height: 1.4; color: #333; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-desc { color: #666; margin: 0 0 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .card-time { font-size: 12px; color: #999; }这里有个容易被忽视的点：标题字号比正文大，它的line-height我单独设置成了1.4，而不是跟正文一样用1.6。因为大字号如果还用1.6，整体高度偏大会看起来特别空。按行高无单位数字等比缩放后，整个卡片的信息密度更接近设计稿。这就是为什么要强调行高用无单位数字，它可以随不同字号自动适配，你只需要记住大标题行高紧一点、正文行高松一点，排版质感提升是立竿见影的。
5. 避坑指南：我踩过的那些CSS3文本样式的坑
5.1 字号单位混用导致的“不可控”
早期我接手过一个老项目，代码里font-size有px、em、rem甚至百分比，改一处字号别处跟着抽风。根源是em继承链太长，某个父级字号一变，所有子级字号跟着连锁缩放，尤其嵌套多层组件时简直没法定位问题。后来组内统一约定：根节点用rem做响应式缩放，组件内部全部用px，特殊场景才用em（比如继承父级字号的按钮图标）。这个约定救了整个团队，排查样式问题的时间大幅缩短。
另外提醒一下rem的边界：如果你不打算做整站等比缩放，老老实实用px就行。很多新手听别人说rem好，就全局rem，结果窗口一拉大所有字都变大，页面比例失衡。rem适合大屏或移动端弹性布局，普通后台管理系统的视觉规范一般要求固定字号，这时候px才是更稳的选择。
5.2 移动端字体放大与最小字号限制
移动端浏览器的默认设置里，很多机型会自动放大字体，尤其当你的font-size小于12px时，部分微信内置浏览器会强制渲染成12px。这种现象在中文网页里太常见了，你明明写了font-size: 10px，运行起来却变成了12px，整个布局崩掉。解决办法是在HTML根元素或者body上加上：
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }加上这行之后，移动端就不容易自作主张放大字号了。另外注意不要用-webkit-text-size-adjust: none，这个写法曾经流行过，但会导致用户无法在浏览器里放大页面文字，对无障碍访问特别不友好。用100%是平衡了体验和稳定性的做法。
再说说优雅降级的问题。设计图里经常出现11px、10px的小字，PC端能正常渲染，但移动端受最小字号限制会变大。与其跟浏览器硬杠，不如重新跟设计师沟通：移动端最小字号建议12px，如果非要更小，用transform: scale(0.8)做视觉缩小，同时占位还是原尺寸。
5.3 行高陷阱：为什么我的按钮文字偏上
按钮文字垂直居中是另一个高频踩坑场景。很多人以为给了line-height和height相等就万事大吉，但字体在行框内并不是水平垂直居中的，它总会稍微往上偏一点，中文状态尤其明显。因为中文字体的ascender和descender比例不同，行框顶部和底部会留出不对称的空间。
我的处理经验是：先按line-height: 1把所有多余行距去掉，再手动调整padding，或者用flex容器让浏览器计算居中。实际开发里推荐后者，因为flex+align-items:center会把行框里的内容也作二次调整，效果稳定得多。千万不要一个像素一个像素地调margin，换个字号就全得重来，属于典型的“白费劲”。
5.4 justify两端对齐的中文排版，为什么最后一行总是很丑
中文文章如果用了text-align: justify，最后一行只有两三个字时，浏览器会把那些字拉得非常开，形成极其难看的的空白。尤其在做卡片摘要、弹窗提示时，这种问题特别明显。解决办法是给文本容器加text-align-last: left，让最后一行强制左对齐，前面几行仍然两端对齐。可惜text-align-last在部分旧浏览器里兼容性一般，如果你的用户群体里有大量旧版安卓，建议直接用text-align: left，避免麻烦。
5.5 伪元素加省略号的经典误用
我见过不少新手想实现“多行省略”，但又不想用-webkit-line-clamp，于是用::after在右下角绝对定位一个省略号盖住文字。这个方案在原文字不足时需要额外判断，否则会有“没有溢出却出现省略号”的bug。所以后续新项目我全部统一用-webkit-line-clamp。它的最可靠之处在于原文字没超出时不会出现省略号，完全按实际内容自适应，省掉一半判断逻辑。
6. 文本样式在前端面试中的出现频率
前端面试面到CSS部分，文本属性属于必考题。有的面试官会直接问“说说text-overflow的生效条件”“line-height的继承规则”“冒号选择器和双冒号选择器有什么区别”，这些问题看起来浅，实际上很容易暴露知识盲区。我建议大家在复习的时候，把line-height、white-space、text-overflow、word-break这几个属性整理成一个知识组，理解它们的相互关系和生效条件，比孤立地背每个属性有效得多。
面试里还有一种出题方式是“给你一张设计图，说说标题、正文、说明文字分别怎么实现”。这时候别说“设个字体大小就行”，而是要把行高、字重、颜色、间距、溢出控制全说清楚，最好再带上为什么这么选。这个细节能体现你是真的做过项目，而不是背了几天面试题。我自己在带实习生的时候，最看重的就是这种能把理论和场景结合起来的候选人。
6.1 高频考点一览
针对面试这块，我把文本样式里最高频的几个点整理成一个速查思路：
line-height的继承方式：无单位数字会传数值给子元素，子元素按自己的字号计算；百分比会先算好像素值再继承。- 单行省略的三件套：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis。 - 多行省略的兼容方案：优先
-webkit-line-clamp，老浏览器再考虑JS方案。 text-align-last只控制最后一行，text-align控制整体。rem和em的区别：rem相对根元素，em相对父级或自身字体大小。text-transform只影响显示，并不会修改文本真实内容。
6.2 实操记忆法推荐
文本属性特别适合用“最小案例”来记。你不需要背完整文档，只需要在本地建一个HTML文件，把上面提到的每段代码分别黏进去，改几个值看效果，就会形成肌肉记忆。我至今还保持着给新人推荐“抄案例改参数”的习惯，因为CSS这个东西，眼睛会了和手会了完全是两回事。你动手敲一遍，比默默看十遍文档都有用。
7. 写在最后的一点经验
做前端这几年，我最大的感触是：文本样式这玩意儿，看起来最基础，但它最考验一个人的细心程度和系统性思维。很多高级页面的质感，恰恰来自那些不起眼的细节——标题行高紧一点、正文字间距松一点、序号颜色做淡处理、超出文本加省略号……每一个磨细节的动作都让页面离“设计稿”更近一步。希望你读这篇文章的时候，不只是收藏，而是打开编辑器亲手把代码敲一遍，把每个属性的效果看一遍。等你把这些属性变成条件反射，再回去看那些“前端面试题合集”，会发现自己已经顺手解决掉了很大一批问题。
