单行 / 多行文本显示省略号（CSS 实现）

在前端开发中，文本溢出时显示省略号（…）是高频需求，本文详细讲解单行文本和多行文本省略号的通用实现方案，包含兼容性处理和常见坑点，适配不同业务场景。

目录

一、单行文本省略号（全浏览器兼容）

核心原理

完整代码

关键注意点

二、多行文本省略号（分场景适配）

方案 1：CSS 原生方案（现代浏览器）

核心原理

完整代码

适配范围

注意点

方案 2：兼容 IE 的降级方案（伪元素 + 定位）

核心原理

完整代码

适配范围

优化技巧

方案 3：JS 精准截断（无兼容问题）

优势

缺点

三、常见问题与解决方案

四、总结

一、单行文本省略号（全浏览器兼容）

核心原理

通过 3 个 CSS 属性配合，强制文本单行显示、溢出隐藏、溢出部分替换为省略号。

完整代码

css

/* 单行文本省略号 */ .single-line-ellipsis { /* 1. 强制文本单行显示 */ white-space: nowrap; /* 2. 溢出容器部分隐藏 */ overflow: hidden; /* 3. 溢出部分显示省略号 */ text-overflow: ellipsis; /* 可选：设置容器宽度（必须有固定/最大宽度，否则不会触发溢出） */ width: 200px; /* 或 max-width: 100%;（适配响应式） */ }

html

预览

<div class="single-line-ellipsis"> 这是一段需要单行显示并在溢出时展示省略号的测试文本，用于演示单行省略号效果 </div>

关键注意点

1. 必须设置容器宽度：width/max-width/flex-basis等，否则文本会自动换行，无法触发溢出；
2. 仅对单行生效：white-space: nowrap是核心，移除后会失效；
3. 兼容所有浏览器：IE6+、Chrome、Firefox、Safari 均支持，无兼容性问题；
4. 行内元素需转块级：若应用在<span>/<a>等行内元素，需添加display: inline-block;或display: block;。

二、多行文本省略号（分场景适配）

多行省略号无统一的 “全兼容” 方案，需根据浏览器兼容性要求选择实现方式。

方案 1：CSS 原生方案（现代浏览器）

核心原理

使用-webkit-line-clamp（WebKit 内核私有属性）限制显示行数，配合弹性盒模型实现省略。

完整代码

css

/* 多行文本省略号（Chrome/Safari/Edge/Firefox 68+） */ .multi-line-ellipsis { /* 1. 限制显示行数 */ -webkit-line-clamp: 3; /* 关键：显示3行，可自定义 */ /* 2. 配合弹性盒和换行规则 */ display: -webkit-box; -webkit-box-orient: vertical; /* 3. 溢出隐藏 + 省略号（兜底） */ overflow: hidden; text-overflow: ellipsis; /* 必须：设置容器宽度 */ width: 200px; /* 可选：行高优化可读性 */ line-height: 1.5; }

html

预览

<div class="multi-line-ellipsis"> 这是一段需要多行显示并在溢出时展示省略号的测试文本，用于演示多行省略号效果，文本内容足够长才能触发省略号。 </div>

适配范围

• ✅ 支持：Chrome、Safari、Edge（Chromium 内核）、Firefox 68+、移动端所有浏览器；
• ❌ 不支持：IE 全版本、极老版 Firefox（<68）。

注意点

1. -webkit-line-clamp是私有属性，但现代浏览器已广泛支持，日常开发优先使用；
2. 必须配合display: -webkit-box和-webkit-box-orient: vertical，缺一不可；
3. 容器需设置宽度，否则无法触发溢出。

方案 2：兼容 IE 的降级方案（伪元素 + 定位）

核心原理

通过height+line-height固定行数高度，伪元素::after定位省略号覆盖在文本末尾。

完整代码

css

/* 多行文本省略号（兼容 IE8+） */ .multi-line-ellipsis-ie { position: relative; /* 核心：行数 × 行高 = 容器高度（示例：3行，行高1.5） */ height: 4.5em; /* 1.5 × 3 = 4.5 */ line-height: 1.5; overflow: hidden; width: 200px; /* 可选：文本缩进，不影响核心逻辑 */ text-indent: 0; } /* 伪元素添加省略号 */ .multi-line-ellipsis-ie::after { content: '...'; position: absolute; right: 0; bottom: 0; /* 背景色覆盖末尾文本，需与容器背景一致 */ background-color: #fff; /* 省略号区域宽度，可调整 */ padding-left: 10px; }

html

预览

<div class="multi-line-ellipsis-ie"> 这是一段需要兼容IE的多行省略号测试文本，通过固定高度和伪元素实现省略效果，适配低版本浏览器。 </div>

适配范围

• ✅ 支持：IE8+、所有现代浏览器；
• ❌ 缺点：省略号可能会覆盖部分文本（无法精准截断），背景色需与容器一致，否则会露底。

优化技巧

1. 伪元素padding-left可根据字体大小调整，避免省略号覆盖过多文本；
2. 若文本未溢出，需通过 JS 控制伪元素显示 / 隐藏（纯 CSS 无法判断是否溢出）。

方案 3：JS 精准截断（无兼容问题）

若需极致兼容且避免 CSS 方案的缺陷，可通过 JavaScript 计算文本宽度，精准截断并添加省略号：

js

/** * 多行文本截断函数 * @param {HTMLElement} el - 文本容器元素 * @param {number} lineNum - 显示行数 * @param {string} ellipsis - 省略号字符 */ function truncateMultiLineText(el, lineNum = 3, ellipsis = '...') { if (!el) return; const originText = el.textContent.trim(); const lineHeight = parseFloat(getComputedStyle(el).lineHeight); const containerWidth = parseFloat(getComputedStyle(el).width); // 估算每行可显示的字符数（粗略值，可根据字体调整） const charPerLine = Math.floor(containerWidth / (lineHeight / 2)); const maxCharNum = charPerLine * lineNum - ellipsis.length; if (originText.length > maxCharNum) { el.textContent = originText.slice(0, maxCharNum) + ellipsis; } } // 调用示例 const textEl = document.querySelector('.js-multi-ellipsis'); truncateMultiLineText(textEl, 3);

css

/* 配合JS的基础样式 */ .js-multi-ellipsis { width: 200px; line-height: 1.5; }

html

预览

<div class="js-multi-ellipsis"> 这是通过JS精准截断的多行文本，无浏览器兼容问题，可精准控制显示行数和省略号。 </div>

优势

• 全浏览器兼容，省略号位置精准；
• 可动态适配容器宽度变化（结合resize事件）。

缺点

• 依赖 JS，首次渲染可能有闪烁；
• 字符数估算存在误差（不同字体 / 字符宽度不同），可结合Canvas计算精准宽度。

三、常见问题与解决方案

四、总结

日常开发中，移动端优先使用「多行原生 CSS 方案」，PC 端若无需兼容 IE 也推荐该方案；仅需兼容 IE 时，再选择「伪元素降级方案」或「JS 截断方案」。