如何实现多行段落4-5行溢出显示省略号(ellipsis) 现有单行省略代码不生效

云上老周

2026-10-1

多行文本溢出显示省略号实现方案

你目前使用的CSS属性仅支持单行文本溢出省略，核心原因是white-space: nowrap会强制文本不换行，无法实现多行场景的截断效果。以下是两种常用的实现方案：

方案1：WebKit内核原生CSS实现（推荐）

这是目前业务开发中使用最广泛的方案，兼容Chrome、Edge、Safari及绝大多数移动端浏览器：

p {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 核心多行省略属性 */
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 控制展示行数，要5行就改为5 */
  -webkit-box-orient: vertical;
  /* 可选：配合行高设置避免截断半行，增强兼容性 */
  line-height: 1.5;
  max-height: calc(1.5 * 4em); /* 数值和-webkit-line-clamp保持一致 */
}

方案2：JS实现（全浏览器兼容）

如果需要兼容不支持WebKit前缀属性的浏览器（如旧版Firefox），可以使用JS动态计算截断：

/**
 * 多行文本溢出截断方法
 * @param {HTMLElement} element - 要处理的DOM元素
 * @param {Number} lineCount - 展示行数
 */
function multiLineEllipsis(element, lineCount) {
  const lineHeight = parseInt(window.getComputedStyle(element).lineHeight);
  const maxHeight = lineHeight * lineCount;
  let originText = element.innerText;
  // 循环截断文本直到高度符合要求
  while (element.offsetHeight > maxHeight && originText.length > 0) {
    originText = originText.slice(0, -1);
    element.innerText = originText + '...';
  }
}

// 调用示例：给p标签设置4行省略
const targetP = document.querySelector('p');
multiLineEllipsis(targetP, 4);