单行文本省略号：3行CSS搞定基础排版
单行文本的省略号实现是最常用的，也是最简单的，我敢说90%的网页标题排版问题都能用这个方法解决。你可能会说“我试过加省略号，但有时候管用有时候不管用”，那多半是因为你少了关键的CSS属性组合。其实核心就3个属性，记住这个“铁三角”组合，以后遇到单行文本溢出直接套用就行。
先看一段基础代码，比如你要给文章标题加省略号：
.article-title {
width: 280px; / 容器宽度，必须设置 /
overflow: hidden; / 隐藏溢出内容 /
text-overflow: ellipsis; / 溢出显示省略号 /
white-space: nowrap; / 强制文本不换行 /
}
这四行代码里，前三个属性是核心，width是前提——没有固定宽度，容器会跟着文字自适应，自然不会有“溢出”一说。我之前帮一个朋友的美食博客改页面时，他的文章标题总是因为菜名太长换行，比如“外婆家秘制红烧肉炖土豆配米饭”这种长标题，在卡片里能折成三行。我就用了这个方法，把标题容器宽度设为卡片的90%，加上这三行CSS，所有标题瞬间变成一行， 整整齐齐跟着省略号，他自己都说“看起来专业多了，像正经网站了”。
可能你会好奇，这三个属性各自起什么作用？为什么少一个都不行？我来给你拆解开讲。overflow: hidden是“守门员”，负责把超出容器的文字藏起来；text-overflow: ellipsis是“化妆师”，告诉浏览器“藏起来的部分用省略号代替”；white-space: nowrap是“纪律委员”，强制文字在一行显示，不然文字自动换行了，哪还有“溢出”可言？就像排队一样， nowrap让文字“不许插队不许换行”，overflow负责“超出队伍范围的人请到后台”，ellipsis则是“后台的人留个‘…’告诉大家后面还有人”。
为了让你更清楚不同属性组合的效果，我整理了一个对比表，你可以根据自己的需求调整：
| CSS属性组合 | 实际效果 | 适用场景 |
|---|---|---|
| 仅overflow: hidden | 溢出文字直接隐藏，无省略号 | 纯功能性隐藏（如按钮文字过长） |
| overflow + text-overflow | 文字会换行，溢出部分仍不显示省略号 | 几乎无适用场景，必须配合nowrap |
| 三属性全组合 | 文字不换行，溢出显示省略号 | 标题、导航栏、标签页等单行文本 |
这里有个很多人会踩的坑：明明加了这三个属性，省略号还是不显示。这时候你可以检查两个地方：一是容器有没有设置width或max-width，没有宽度限制的元素不会有溢出；二是有没有其他CSS属性“捣乱”，比如white-space: normal（默认值）会覆盖nowrap，或者display: inline元素不支持宽度设置（需要改成inline-block或block）。我之前就遇到过一个项目，导航栏的文字加了省略号却不生效，查了半天才发现是父元素设置了flex-shrink: 1，导致容器宽度被压缩成文字长度，后来给导航项加了min-width: 0才解决——有时候问题就藏在这些细节里。
如果你想快速调试，推荐用浏览器的开发者工具：右键点击元素选择“检查”，在Styles面板里找到对应的CSS类，勾选或取消勾选属性，实时看效果。比如你可以先勾选overflow: hidden，再勾text-overflow: ellipsis，最后勾white-space: nowrap，一步步看文字怎么变化，比一遍遍改代码刷新页面效率高多了。MDN文档里也提到过，text-overflow属性仅在块级元素或具有固定宽度的内联块元素上生效，且必须配合overflow: hidden和white-space: nowrap使用，这三个条件缺一不可（参考链接：nofollow）。
多行文本省略号：跨浏览器兼容的进阶技巧
单行省略搞定了，但如果是商品描述、文章摘要或者评论预览，你可能需要显示2-3行文字，多余的再用省略号代替——比如电商网站的商品卡片，通常会留2行描述空间，太长就用“…”收尾。这时候单行的方法就不管用了，white-space: nowrap会强制文字变成一行，反而更糟。其实多行省略有个“半官方”的CSS方案，虽然带点浏览器前缀，但现在95%以上的场景都能用，我自己做过的十几个项目里，只要不是必须兼容IE8以下，这个方法从来没掉过链子。
核心代码比单行多了两个属性，但逻辑更绕一点，先看示例：
.product-desc {
display: -webkit-box; / 将元素转为弹性盒模型 /
-webkit-line-clamp: 2; / 限制显示2行 /
-webkit-box-orient: vertical; / 垂直排列子元素 /
overflow: hidden; / 隐藏溢出内容 /
width: 300px; / 容器宽度 /
line-height: 1.5; / 行高，影响总高度 /
}
这段代码里，-webkit-line-clamp是“主角”，它直接指定显示的行数（比如2就是显示2行）；display: -webkit-box和-webkit-box-orient: vertical是“辅助角色”，让元素变成垂直排列的弹性盒，这样-webkit-line-clamp才能生效；最后overflow: hidden还是负责隐藏溢出内容。我之前给一个生鲜电商做商品列表时，用这个方法把所有商品描述统一成2行，视觉上整整齐齐，客户反馈说“看起来库存很充足的样子”——有时候排版的细节真的会影响用户对产品的感知。
为什么这里要用-webkit-前缀？因为这是WebKit内核浏览器（Chrome、Safari等）的私有属性，不过现在Firefox和Edge也都支持了。根据caniuse.com的数据，全球超过95%的浏览器都能识别这个属性，只有IE完全不支持（但现在还有多少项目需要兼容IE呢？）。如果你实在要兼容旧浏览器，可以用JavaScript计算文字高度，但我 优先用CSS方案，毕竟代码更简洁，性能也更好——JavaScript计算需要等DOM加载完成，可能会有闪烁，而CSS是渲染时直接生效。
这里有几个关键参数需要你根据自己的项目调整。-webkit-line-clamp的值就是你想显示的行数，比如评论预览可以设为3；line-height乘以行数就是容器的最小高度，比如line-height: 1.5，显示2行，那容器高度至少是1.5*2=3em，不然可能会出现“半截字”。还有width，多行文本的容器宽度更重要，宽度太宽可能一行就显示完了，根本用不到省略号；太窄又会导致行数过多，失去“预览”的意义。我一般会根据设计稿先定好容器宽度，再调整-webkit-line-clamp的值，比如手机端商品卡片宽度通常是屏幕的45%（双列布局），这时候设-webkit-line-clamp: 2比较合适。
可能你会问：如果不用-webkit-line-clamp，还有没有其他方法？确实有，比如用::after伪元素添加省略号，但需要精确计算行数和高度，还得处理文字刚好占满行数的情况（这时候不应该显示省略号），实现起来很麻烦。我之前试过用height: 4em; overflow: hidden配合::after，结果发现当文字刚好是2行时，省略号还是会显示在 看起来特别奇怪——最后还是换回了-webkit-line-clamp，简单又可靠。
为了让你更清晰地对比单行和多行的差异，我做了一个表格：
| 实现类型 | 核心CSS属性 | 浏览器支持 | 适用场景 |
|---|---|---|---|
| 单行省略 | overflow/text-overflow/white-space | 所有现代浏览器+IE8+ | 标题、导航、按钮文本 |
| 多行省略 | -webkit-line-clamp/-webkit-box系列 | Chrome/Firefox/Safari/Edge（95%+覆盖率） | 段落描述、商品详情、评论预览 |
最后再提醒一个小细节：如果你的文本里有英文单词或长数字，可能会出现“单词截断”的问题——比如“responsiveness”这个长单词，可能会被从中间截断显示“respon…”。这时候可以加一行word-break: break-all强制换行，但会影响阅读体验；或者用word-wrap: break-word让长单词整体换行，优先保证单词完整。我通常会根据内容类型选择：纯中文文本用默认值，中英文混合文本加word-wrap: break-word，避免出现“半个单词+省略号”的尴尬情况。
这些方法你都可以直接复制代码到项目里试，记得把width、-webkit-line-clamp和line-height改成适合你自己页面的值。如果试的时候发现省略号位置不对，或者在某个浏览器不显示，欢迎留言告诉我具体情况——比如用的什么浏览器、代码怎么写的，我帮你看看可能哪里出了问题，毕竟实战中遇到的问题有时候比教程里讲的更复杂，大家一起踩坑一起解决才学得快嘛！
你用多行文本省略号的时候，有没有遇到过在某些浏览器里不显示的情况？其实主要问题出在浏览器内核上。咱们常用的那个 -webkit-line-clamp 方案，它是基于 WebKit 内核开发的，所以像早期的 IE 浏览器，特别是 IE11 及以下版本，根本不认这个属性。我之前帮一个老项目改页面，客户说他们公司还有人用 IE11 办公，结果我用了多行省略的 CSS 代码，在 Chrome 里好好的，到了 IE 里文字直接全显示出来了，一行都没省略，当时还以为是代码写错了，查了半天才发现是浏览器不支持的锅。
不过现在这个问题其实不用太担心，毕竟主流浏览器早就更新换代了。你看现在 Chrome、Firefox、Safari，包括新版的 Edge（就是基于 Chromium 内核的那个版本），都已经支持这个属性了，全球浏览器覆盖率能达到 95% 以上。除非你的项目明确要求兼容那种十年前的旧浏览器，否则基本不用纠结兼容性问题。要是真的遇到极特殊情况，必须兼容特别老的浏览器，那就得用 JavaScript 去算文本高度了，但那个方法可比 CSS 麻烦多了——得先获取文本内容，再根据字体大小、行高算出一行的高度，然后判断总高度超过多少行就隐藏并加省略号，中间还要处理各种边缘情况，比如文字里有换行符、字体样式变化什么的，很容易出 bug。所以我一般都 优先用 CSS 方案，简单又可靠，除非万不得已才考虑 JS。
为什么设置了text-overflow: ellipsis却不显示省略号？
text-overflow: ellipsis生效需要满足三个条件：首先容器必须设置固定宽度（width或max-width），否则元素会自适应文字宽度，不会产生溢出；其次需要配合overflow: hidden隐藏溢出内容；最后单行文本需添加white-space: nowrap强制不换行。若仍不生效，需检查是否有冲突属性，比如display: inline元素不支持宽度设置（需改为inline-block或block），或white-space被其他样式覆盖为normal。
多行文本省略号在哪些浏览器中可能不生效？
多行文本省略号常用的-webkit-line-clamp方案基于WebKit内核， 早期IE浏览器（IE11及以下）完全不支持。现代浏览器中，Chrome、Firefox、Safari、Edge（基于Chromium内核版本）均已支持，全球浏览器覆盖率达95%以上。若需兼容极旧浏览器，可通过JavaScript计算文本高度实现，但复杂度较高，实际项目中 优先使用CSS方案。
如何控制多行文本省略号显示的行数（比如只显示2行或3行）？
通过-webkit-line-clamp属性可直接指定行数，例如想显示2行，设置-webkit-line-clamp: 2；显示3行则设为3。需注意该属性需配合display: -webkit-box和-webkit-box-orient: vertical使用，同时容器需设置overflow: hidden和固定宽度。例如：.desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 300px; } 即可让文本最多显示2行，多余内容用省略号代替。
文本中包含长英文单词或数字时，省略号前出现单词截断怎么办？
可通过CSS属性优化：若希望长单词整体换行（避免截断），添加word-wrap: break-word，让浏览器在单词内换行但优先保持单词完整；若允许截断（如纯数字串），用word-break: break-all强制在任意字符处换行。 根据内容类型选择，中英文混合文本优先用word-wrap: break-word，避免“半个单词+省略号”的情况，提升阅读体验。
省略号的样式（如颜色、大小）可以自定义吗？
text-overflow: ellipsis生成的省略号样式会继承文本的CSS属性，无法单独修改。若需调整颜色或大小，可通过修改文本的color、font-size等属性间接改变省略号样式（因省略号属于文本的一部分）。例如给文本设置color: #666; font-size: 14px;，省略号也会同步显示为灰色、14px大小。目前CSS暂无直接自定义省略号样式的属性，若需特殊效果（如彩色省略号），需通过伪元素模拟，但复杂度较高。
