单行 / 多行文本显示省略号（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>

关键注意点

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

注意点

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

方案 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+、所有现代浏览器；
❌ 缺点：省略号可能会覆盖部分文本（无法精准截断），背景色需与容器一致，否则会露底。

优化技巧

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

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

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

复制代码

/**
 * 多行文本截断函数
 * @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 计算精准宽度。

三、常见问题与解决方案

问题现象	原因	解决方法
单行省略号不生效	容器无宽度 / 元素是行内元素 / 未设置 `white-space: nowrap`	1. 添加 `width/max-width`；2. 设 `display: inline-block/block`；3. 确认 `white-space: nowrap`
多行原生方案失效	缺少 `-webkit-box-orient: vertical` / 容器未设高度	1. 补充 `-webkit-box-orient: vertical`；2. 无需手动设高度（由 `-webkit-line-clamp` 控制）
省略号覆盖文本（IE 方案）	伪元素背景色与容器不一致 /padding-left 过小	1. 伪元素背景色与容器统一；2. 增大 `padding-left`（如 10px → 15px）
移动端多行省略号错位	容器宽度自适应导致计算错误	1. 使用 `max-width: 100%` 替代固定宽度；2. 移动端优先用原生 `-webkit-line-clamp` 方案

四、总结

实现方式	兼容性	优点	缺点	适用场景
单行 CSS	全兼容	简单、无坑	仅单行	按钮、导航栏、短文本
多行原生 CSS	现代浏览器	简洁、精准	不兼容 IE	移动端、现代浏览器项目
多行 IE 兼容 CSS	IE8+	纯 CSS、无需 JS	省略号可能覆盖文本	需兼容低版本 IE 的 PC 端
JS 截断	全兼容	精准、灵活	依赖 JS、首次渲染闪烁	极致兼容需求、动态文本场景

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