在网页开发中，多行文本溢出是常见的界面问题。当文本内容超出容器限定的高度和宽度时，若不做处理会破坏页面布局的整洁性，影响用户体验。本文将详细介绍两种主流的多行文本溢出解决方案，并从多个维度进行对比，帮助开发者根据实际需求选择最合适的方法。

一、使用 CSS 控制多行文本溢出显示

CSS 是处理文本溢出最直接、高效的方式，通过组合特定的 CSS 属性，可以实现多行文本溢出时显示省略号的效果，且兼容性在现代浏览器中表现良好。

1.1 核心 CSS 属性组合

实现多行文本溢出显示省略号，需要依赖以下几个 CSS 属性的协同作用：

• overflow: hidden：该属性用于隐藏容器内超出部分的内容，是实现溢出处理的基础。若不设置此属性，溢出的文本会直接超出容器边界，无法达到预期效果。

• text-overflow: ellipsis：此属性用于在文本溢出时显示省略号（...），但需要注意的是，它仅在单行文本溢出且配合white-space: nowrap时生效，在多行文本场景中，必须结合其他属性才能发挥作用。

• display: -webkit-box：将元素设置为弹性盒模型，为后续的文本行数控制提供支持，这是实现多行溢出省略的关键属性之一，目前主流浏览器（Chrome、Safari、Edge 等）均支持该属性。

• -webkit-line-clamp: n：用于指定文本显示的最大行数，其中n为具体的行数数值（如 2、3 等）。当文本行数超过设定值时，超出部分会被隐藏，并在末尾显示省略号。

• -webkit-box-orient: vertical：设置弹性盒模型中文本的排列方向为垂直方向，确保文本按照从上到下的顺序排列，与-webkit-line-clamp配合使用，才能准确控制多行文本的显示。

1.2 完整代码示例

.multi-line-css {width: 300px;height: 80px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;line-height: 26px; font-size: 16px;
}

<div class="multi-line-css">这是一段用于测试多行文本溢出的内容，通过CSS属性组合，可以实现当文本超出3行时，自动隐藏超出部分并显示省略号，保持页面布局的整洁性。
</div>

在上述代码中，容器高度（height）需根据line-height和-webkit-line-clamp的数值进行计算（如line-height:26px、-webkit-line-clamp:3时，容器高度可设为26px*3≈80px），确保文本刚好在设定行数时溢出。

1.3 优缺点分析

• 优点：实现方式简单，仅需几行 CSS 代码，无需额外的 HTML 结构或 JavaScript 逻辑；性能优秀，由浏览器原生渲染处理，不会增加页面的性能负担；兼容性较好，支持绝大多数现代浏览器，满足日常开发需求。

• 缺点：-webkit-line-clamp属性属于 WebKit 内核的私有属性，虽然主流浏览器均已支持，但在部分老旧浏览器（如 IE）中无法正常工作；无法自定义省略号的样式（如颜色、大小），且省略号只能固定在文本末尾，灵活性相对有限。

二、单独用 div 模拟…效果

这种方法通过创建额外的 div 容器和伪元素，模拟文本溢出时的效果。

2.1 实现原理

1. 首先创建一个固定尺寸的容器（外层 div），用于包裹文本内容，设置overflow: hidden隐藏溢出部分，确保默认状态下文本不会超出容器。

2. 添加一个div元素用于模拟 … 的效果，并使其浮动在容器的右侧。

3. 使用伪元素（如::before）为容器添加占位，将文本挤压到容器的边缘，实现省略号效果。

4. 将实际文本内容通过margin-top: -XXpx，将原始文本内容上浮，让最后一行和省略号平齐。

2.2 完整代码示例

.container {width: 200px;height: 100px;border: 1px solid #ddd;padding: 10px;overflow: hidden;
}
.text-container {height: 100px;overflow: hidden;
}
.text-container::before {content: "";height: 80px;display: block; 
}
.more {float: right;margin-top: -5px;
}
.content {margin-top: -80px;line-height: 25px;
}

<div class="container"><div class="text-container"><div class="more">...</div><div class="content">这是一段用于测试多行文本溢出的内容，通过div加伪元素的方式，当鼠标hover时，完整文本会上浮显示方便用户查看所有内容，同时不影响默认状态下的页面布局。</div></div>
</div>

2.3 优缺点分析

• 优点：灵活性高，可自定义完整文本的显示样式（如背景色、阴影、边框）；兼容性极佳，不依赖任何私有属性，支持所有浏览器，包括老旧版本的 IE；交互性强，通过鼠标 hover 即可查看完整文本，无需额外的点击操作。

• 缺点：需要额外的 HTML 结构（内层 div）和伪元素，代码量相对较多；

三、两种方法的全面对比

为了帮助开发者在实际项目中快速选择合适的方法，下表从多个关键维度对两种多行文本溢出处理方法进行对比：

对比维度	CSS 控制溢出显示	div + 伪元素文本上浮
实现复杂度	低，仅需 CSS 属性组合，无额外结构	中，需额外 HTML 结构和伪元素
兼容性	较好，支持现代浏览器，不支持旧 IE	极佳，支持所有浏览器（包括旧 IE）
交互性	无交互，仅显示省略号	无交互，仅显示省略号
样式灵活性	低，无法自定义省略号样式	低，可以自定义省略号样式
适用场景	仅需展示部分文本，无需查看完整内容（如列表标题、卡片摘要）	需要查看完整文本，且不破坏原有布局（如表格内容、注释说明）

四、总结与选择建议

两种多行文本溢出处理方法各有优劣，开发者需根据项目的实际需求进行选择：

• 若项目以现代浏览器为目标，仅需简单展示文本摘要，无需用户查看完整内容，优先选择 CSS 控制溢出显示的方法，其简洁的代码和优秀的性能能有效提升开发效率。

• 若项目需要兼容老旧浏览器，或需要让用户查看完整文本，同时希望有更灵活的样式和交互效果，推荐选择 div 的方法，虽然代码量稍多，但能满足更复杂的业务场景。

在实际开发中，还可以结合两种方法的优势进行拓展，例如：在 CSS 控制溢出显示的基础上，添加点击事件弹出完整文本弹窗，兼顾简洁性和交互性，为用户提供更优质的体验。