如何通过CSS或JavaScript实现文本最多两行显示并超出省略？兼容主流浏览器

你用的-webkit-line-clamp方案其实已被多数主流浏览器支持（Chrome、Firefox 68+、Edge、Safari），但如果要覆盖更旧浏览器（比如IE11），可以参考以下几种实现方案：

方案1：优化原生CSS方案（现代浏览器优先） #

目前主流浏览器均已支持带webkit前缀的多行截断写法，补充标准属性兜底后，可覆盖绝大多数现代场景：

p {
  width: 300px;
  font-size: 14px;
  font-weight: 500;
  /* WebKit核心属性 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* 标准属性兜底 */
  display: box;
  box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

注：Firefox 68+、Edge Chromium版、Safari都已适配该写法，足以覆盖95%以上的用户群体。

方案2：伪元素+定位的纯CSS兼容方案（适配旧浏览器） #

如果需要兼容IE11这类不支持-webkit-line-clamp的浏览器，可以用固定高度+伪元素的方式实现：

p {
  width: 300px;
  font-size: 14px;
  font-weight: 500;
  height: 42px; /* 行高×行数：14×1.5×2=42，需根据实际行高调整 */
  line-height: 1.5;
  overflow: hidden;
  position: relative;
  padding-right: 1em; /* 给省略号预留空间 */
}

p::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff; /* 背景色需与容器背景一致 */
  padding-left: 0.5em; /* 覆盖末尾多余文本 */
}

注意：该方法需固定容器高度，且背景色必须匹配容器，否则省略号会透出底层内容；若文本刚好两行，也会显示省略号，可结合JS判断是否需要添加伪元素优化。

方案3：JavaScript动态截断方案（精确控制） #

针对文本动态变化、行高不确定的复杂场景，用JS计算文本高度后精准截断：

function clampText(element, lines = 2) {
  const lineHeight = parseFloat(getComputedStyle(element).lineHeight);
  const maxHeight = lineHeight * lines;
  
  if (element.scrollHeight > maxHeight) {
    let text = element.textContent;
    let truncatedText = text;
    // 二分法快速定位截断点
    let start = 0;
    let end = text.length;
    while (start <= end) {
      const mid = Math.floor((start + end) / 2);
      element.textContent = text.slice(0, mid) + "...";
      if (element.scrollHeight <= maxHeight) {
        truncatedText = text.slice(0, mid) + "...";
        start = mid + 1;
      } else {
        end = mid - 1;
      }
    }
    element.textContent = truncatedText;
  }
}

// 调用示例
const targetPara = document.querySelector('p');
clampText(targetPara, 2);

// 动态文本更新后需重新调用该方法

该方案兼容性拉满，可适配所有浏览器，唯一缺点是需要JS介入，动态内容更新时需重新执行。

内容的提问来源于stack exchange，提问作者AWEI