CSS进阶：多行文本溢出隐藏与省略号显示的优雅解决方案

1. 从单行到多行：为什么我们需要更优雅的文本截断方案

大家好，我是老张，一个在Web前端领域摸爬滚打了十多年的老兵。今天想和大家聊聊一个看似简单，却在实际项目中反复折磨过我的问题：多行文本的溢出隐藏与省略号显示。

相信很多朋友都熟悉单行文本的“溢出省略”三件套：white-space: nowrap;、overflow: hidden;、text-overflow: ellipsis;。这套组合拳在早期的网页设计中确实够用，毕竟那时候的页面布局相对简单，信息密度也没那么高。我刚开始做项目时，也靠着这三板斧解决了不少问题，感觉CSS真是方便。

但是，时代变了。移动互联网的普及带来了响应式设计的浪潮，我们的页面需要在从4英寸手机到27英寸显示器等各种尺寸的设备上优雅地呈现。尤其是在移动端，屏幕空间寸土寸金，我们经常需要在卡片、列表项或摘要区域展示一段描述性文字。这段文字不能太长，否则会破坏布局；也不能太短，否则信息传达不完整。这时候，将文本限制在固定的2行、3行或4行，并在末尾用省略号提示用户“还有更多内容”，就成了一个非常普遍且刚性的需求。

我清楚地记得，几年前在一个新闻类App的H5页面项目中，产品经理拿着设计稿过来，指着那些整齐划一的新闻摘要卡片说：“老张，这里每段摘要最多显示三行，超出的部分用‘...’表示，点击卡片可以看全文。”我当时的第一个念头就是：“简单，用单行截断改改不就行了？”结果一上手就傻眼了。单行截断的nowrap属性强制文本不换行，而多行需求恰恰需要文本能够换行，只是要控制换行的行数。这完全是两个相反的方向。

于是，我开始了一段漫长的“踩坑”和“填坑”之旅。早期没有标准属性支持，大家各显神通，有用JavaScript计算字符数截断的（计算不准，中英文混合是噩梦），有用伪元素叠加背景色模拟省略号的（兼容性差，代码丑陋）。直到后来，-webkit-line-clamp这个非标准但被广泛支持的属性进入视野，配合Flexbox布局，才让这件事有了相对优雅的解决方案。今天，我就把这些年积累的经验、踩过的坑，以及目前我认为最优雅、最实用的多行文本溢出解决方案，毫无保留地分享给大家。无论你是刚入门的前端新人，还是想优化现有方案的老手，相信都能从中找到你需要的东西。

2. 核心武器：深入理解 -webkit-line-clamp 属性

要搞定多行省略，我们首先得请出今天的“主角”——-webkit-line-clamp。我知道，一看到“-webkit-”这个前缀，有些同学可能会皱眉头，担心兼容性问题。别急，我们先把它搞清楚，再谈如何让它“安分”地在各个浏览器里工作。

-webkit-line-clamp 本质上是一个 WebKit 内核浏览器（如 Chrome、Safari、新版Edge）的私有属性。它的作用非常直接：把一个块级元素的文本内容限制在指定的行数内。如果文本内容超出了这个行数限制，它就会在最后一行末尾截断，并显示省略号（…）。

这个属性不能单独使用，它需要和另外几个“好搭档”配合，才能发挥出完整的效果。我们可以把这套组合看作一个“四件套”：

.multiline-ellipsis {
  display: -webkit-box;          /* 1. 启用弹性伸缩盒子旧模型 */
  -webkit-box-orient: vertical;   /* 2. 设置盒子内元素垂直排列 */
  -webkit-line-clamp: 3;         /* 3. 限制文本显示的行数 */
  overflow: hidden;               /* 4. 隐藏超出限制的内容 */
}

我们来拆解一下每一行代码的作用：

1. display: -webkit-box;：这是关键的第一步。它将元素的显示模式设置为旧的弹性盒子模型（2009年草案）。为什么不用我们现在更熟悉的 dis