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

一、使用 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 实现原理

首先创建一个固定尺寸的容器（外层 div），用于包裹文本内容，设置overflow: hidden隐藏溢出部分，确保默认状态下文本不会超出容器。
添加一个div元素用于模拟 … 的效果，并使其浮动在容器的右侧。
使用伪元素（如::before）为容器添加占位，将文本挤压到容器的边缘，实现省略号效果。
将实际文本内容通过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 控制溢出显示的基础上，添加点击事件弹出完整文本弹窗，兼顾简洁性和交互性，为用户提供更优质的体验。