CSS 文字溢出省略怎么写：三种常用方案一次讲清

你写了一个列表或卡片，文字一多就撑破边框、换行成一坨，页面瞬间丑到不想看，却不知道怎么让超出的部分变成「…」。这其实是前端新手最常被卡住的小问题之一，网上搜到的多是碎片化片段，拼在一起常常还是不生效。先给结论：CSS 文字溢出省略最常用的是单行省略（text-overflow: ellipsis），多行场景用 -webkit-line-clamp，再不济还能用 JS 截断兜底。今天这篇文章，编程狮就把这三种方案一次讲清，每种都配上能直接抄的代码，你照着改两处就能用，不用再对着报错发愁。

一、为什么需要文字溢出省略

网页里的文字长度往往是不可控的：用户昵称可能很长，商品标题可能堆了一长串，评论内容更是长短不一。如果容器宽度固定，文字就会自动换行，撑高整个卡片，原本整齐的网格会变得参差不齐，严重的还会把旁边的内容挤变形。

文字溢出省略解决的就是这个问题：当内容超出容器时，用省略号「…」收尾，既保留「还有更多」的提示，又不破坏布局。它不是炫技，而是列表页、卡片页、消息流里天天要用到的基础功。先建立这个认知，后面三种写法你才知道该往哪儿用，也知道什么时候该用哪一种。

想系统学 CSS 基础，可以先过一遍 CSS 教程，把盒模型和文本属性先理顺，后面写起来才不卡壳，文字溢出省略本质就是文本属性的一组组合。

二、方案一：单行省略（text-overflow: ellipsis）

单行省略是最常见、兼容性最好的做法，核心就三行属性：white-space 禁止换行、overflow 隐藏溢出、text-overflow 显示省略号。三者必须同时出现，少一个都不生效，这是新手最容易踩的坑，很多人只写 text-overflow 发现没反应，就是漏了另外两个。

.w3cschool-ellipsis {
  width: 200px;
  white-space: nowrap;        /* 禁止换行 */
  overflow: hidden;           /* 隐藏溢出部分 */
  text-overflow: ellipsis;    /* 超出显示省略号 */
}

这段样式挂在任意一个块级元素上就能用。比如一个商品标题 div，文字超过 200px 就会变成「夏季新款纯棉短袖…」。注意：容器必须是块级或设置了宽度的行内块，且宽度要固定，否则浏览器不知道「超出多少才算溢出」，省略号永远不会出现。

还有一个高频坑：如果这个元素在 flex 布局里是子项，单纯写上面三行可能无效，因为 flex 子项默认会被拉伸。解决办法是给它加 min-width: 0;，告诉 flex 容器「我允许被压缩」，省略号才会正常出现。记住这个组合，能帮你省掉大半天调试时间。

三、方案二：多行省略（-webkit-line-clamp）

单行不够用时，比如商品描述要展示两行再省略，就得靠 -webkit-line-clamp。它本质是配合弹性盒模型，把超出指定行数的内容收成省略号，目前主流浏览器都支持，是做卡片描述最顺手的方案。

.w3cschool-clamp {
  width: 200px;
  display: -webkit-box;            /* 老版弹性盒 */
  -webkit-box-orient: vertical;    /* 垂直排列 */
  -webkit-line-clamp: 2;           /* 最多显示 2 行 */
  overflow: hidden;
}

把 -webkit-line-clamp 的值改成 3，就能显示三行再省略。它比单行方案灵活，适合卡片描述、评论预览这类场景。这里顺带提一句，line-clamp 依赖的是 CSS3 的弹性盒能力，想深入可以看 CSS3 教程，把弹性布局整套弄懂，多行控制会更顺手，也能少走很多弯路。

要注意的是，-webkit-line-clamp 依赖 -webkit-box，和现代 flex 布局不是同一套，混用时别把 display 写冲突。遇到不生效，先检查有没有漏掉 -webkit-box-orient，再确认容器确实被限制了高度或行数。

四、方案三：JS 截断兜底

前两种都是纯 CSS 方案，优点是简单、不占性能；但它们的省略位置是按「字符宽度」粗略截断的，做不到「刚好在词边界断」。如果你要对省略后的内容做更精细控制，比如保留完整单词、或者点击展开全文，就需要 JS 兜底。

function w3cschoolTruncate(text, max) {
  if (text.length <= max) return text;
  return text.slice(0, max) + '…';   // 超出则截断并补省略号
}
const tip = '编程狮(www.w3cschool.cn) 提供大量免费教程';
console.log(w3cschoolTruncate(tip, 10));

这个函数接收原文和最大长度，超过就切开补省略号。它的好处是逻辑完全由你掌控：可以只在窄屏时截断，也可以先展示省略、点「展开」再显示全文。缺点是要在渲染后跑一段脚本，列表项极多时会有性能开销，一般场景感知不到，属于锦上添花而非必选项。

五、三种方案怎么选

一句话总结：能 CSS 解决就别上 JS。下面这张表帮你快速对号入座，写之前先想清楚你的场景属于哪一类。

属性记不住时，CSS 参考手册 能随时查每个属性的写法和取值，写的时候旁边挂一个很省心。大多数页面用前两种就够，JS 只在确实有交互需求时才上，别为了酷炫而提前引入复杂度。

总结

回到开头：CSS 文字溢出省略最稳的是单行 text-overflow: ellipsis，多行用 -webkit-line-clamp，交互复杂再上 JS 截断。记住两个高频坑——三属性必须同时写、flex 子项要加 min-width:0，能帮你省掉大半天调试。

你接下来最该做的，是挑一个真实卡片把三种都试一遍，比只看不动手学得牢。顺着 CSS 教程、CSS3 教程、CSS 参考手册 一路学下去，文本排版这块就稳了，以后遇到再奇怪的溢出也能从容处理。

延伸学习

想把 CSS 文本与布局这块系统补齐，可以按这个顺序来：

1. 先从 CSS 入门课程 把基础语法和盒模型铺平，配套图文微课适合零基础跟练；
2. 遇到具体写法卡壳时，之前那篇 CSS 水平垂直居中方法 能补全布局思路；
3. 想给卡片加阴影效果，CSS3阴影生成器 能在线调参数，调好直接抄样式。

常见问题

Q：单行省略写了不生效，最可能的原因是什么？

多半是三件套没写全，或容器没有固定宽度。检查 white-space、overflow、text-overflow 是否都在，且父级给了明确宽度；flex 子项记得补 min-width:0，这是最高频的漏点。

Q：-webkit-line-clamp 一定要写 -webkit-box-orient 吗？

要。它依赖老版弹性盒模型，-webkit-box-orient: vertical 决定文字纵向排列，漏掉这一行多行省略通常不会生效，浏览器无从判断该按几行截断。

Q：JS 截断和 CSS 省略号该用哪个？

纯展示优先 CSS，简单且零开销；只有需要「按词截断、点击展开、服务端拼接」这类精细控制时，才用 JS 兜底，避免无谓的脚本开销。