多行文本截断是前端开发中的高频需求，从新闻列表到商品描述，往往需要把过长的内容限制在固定区域内。浏览器原生只提供了单行省略号溢出提示，而多行场景下，开发者通常使用-webkit-line-clamp来获得省略号效果。但省略号不是唯一选择，有些设计需要渐隐、遮罩，或者配一个展开按钮。本文将拆解几种实现多行截断且能自定义溢出样式的技术方案。

经典方案：-webkit-line-clamp 与它的局限

在讨论替代方案之前，先回顾最常用的多行截断写法。通过组合display: -webkit-box、-webkit-box-orient: vertical和-webkit-line-clamp，可以让文本在指定行数后显示省略号。这个方案在移动端浏览器和Chromium内核中几乎开箱即用，Firefox较新版本也支持了标准属性line-clamp，但老版本需要前缀。

以下代码把段落限制在三行，超出部分自动折叠为省略号：

.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

这个写法的优点在于简单可靠，不需要计算行高，也不需要额外元素。但局限也同样明显：省略号样式无法移除，你不能改成渐隐或自定义符号；同时依赖display: -webkit-box会破坏某些Flex或Grid布局；当内容不足三行时，不会显示省略号，但仍会创建一个盒模型，可能影响高度。另外，如果文本中包含换行符或行内元素，截断位置可能出现错位。对于追求视觉统一或需要交互的组件，这套方案就不太够用。

告别省略号：mask遮罩与渐变淡出

如果不想看到省略号，希望最后一行文字逐渐变透明，可以使用CSS mask-image来实现。原理是给容器应用一个垂直方向的线性渐变遮罩，让顶部完全不透明，底部逐渐透明。这样文本在接近容器底部时会淡出，而不是被省略号打断。

代码示例如下，假设容器高度为3行，line-height为1.6em：

.fade-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

这里仍然使用了-webkit-line-clamp来限制行数，但通过mask把末尾的省略号隐藏掉了。注意，mask-image需要同时写标准属性和-webkit-前缀。某些浏览器对mask与-webkit-box组合支持不佳，此时可以改为直接设置固定max-height，再配合mask，不用line-clamp。淡出方案适合图片列表、评论摘要或品牌展示区域，视觉上更柔和，但缺点是无法提供明确的截断提示，用户可能不知道内容被隐藏。

另一种常见的淡出做法是在文本容器底部叠加一个伪元素，背景为线性渐变，从透明到容器背景色。这样不需要mask-image，兼容性更好。例如：

.fade-overlay {
  position: relative;
  max-height: 4.8em;
  overflow: hidden;
}
.fade-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.4em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

这个伪元素遮罩会覆盖最后一行的一部分，让文字看起来逐渐消失。需要注意的是，背景色需要与页面背景一致，如果背景是图片或复杂渐变，遮罩效果就会打折扣。这种方式可以完全摆脱省略号，并且不会依赖-webkit-box，兼容性更好。

精确控制：max-height + overflow 与展开按钮

很多列表场景并不只是隐藏文字，还需要提供一个展开按钮让用户查看完整内容。单纯用line-clamp无法知道文本是否真的溢出，也就不能按需显示按钮。此时可以用max-height配合JS或:has选择器来判断。

先看纯CSS限定高度的基本写法。把容器最大高度设为行高的整数倍，并隐藏溢出：

.text-box {
  max-height: 7.2em; /* 4.5行 * 1.6em */
  overflow: hidden;
  line-height: 1.6em;
}

这个方案的缺点是没有省略号提示，但可以在文本末尾手动插入一个视觉元素，比如一个渐变色块或“展开”链接。如果文本不足限定高度，容器会自动收缩，不会出现空白。不过要显示展开按钮，需要检测是否溢出。现代浏览器支持CSS :has选择器，可以检测内部内容是否溢出。例如：

<div class="text-wrap">
  <p class="text">这里是可能很长的文本内容</p>
  <button class="toggle">展开</button>
</div>

.text-wrap {
  position: relative;
}
.text {
  max-height: 3.2em;
  overflow: hidden;
  line-height: 1.6em;
}
.toggle {
  display: none;
}
.text-wrap:has(.text) .toggle {
  display: inline-block;
}
/* 仅当文本溢出时显示按钮 */
.text-wrap:has(.text:hover) .toggle {
  display: inline-block;
}

上面的例子并不严谨，只是为了说明:has可以结合状态来改变布局。真实项目中，判断溢出最可靠的方式还是JavaScript。可以比较元素的scrollHeight和clientHeight，如果前者大于后者，说明内容被截断了。借助ResizeObserver，可以在窗口尺寸变化时重新计算。

下面给出一个简洁的JavaScript示例，根据溢出情况切换是否截断和显示按钮：

const boxes = document.querySelectorAll('.text-box');
boxes.forEach(box => {
  const content = box.querySelector('.text');
  const btn = box.querySelector('.toggle');
  function checkOverflow() {
    if (content.scrollHeight > content.clientHeight) {
      box.classList.add('is-overflow');
      btn.style.display = 'inline-block';
    } else {
      box.classList.remove('is-overflow');
      btn.style.display = 'none';
    }
  }
  checkOverflow();
  window.addEventListener('resize', checkOverflow);
  if (window.ResizeObserver) {
    new ResizeObserver(checkOverflow).observe(content);
  }
  btn.addEventListener('click', () => {
    box.classList.toggle('expanded');
    if (box.classList.contains('expanded')) {
      content.style.maxHeight = 'none';
      btn.textContent = '收起';
    } else {
      content.style.maxHeight = '';
      btn.textContent = '展开';
    }
  });
});

这段代码通过scrollHeight和clientHeight的差值判断是否溢出，并控制按钮的显示。点击后切换expanded类，把max-height设为none来完全展开。这种方式完全由开发者控制视觉效果，省略号、淡出或者箭头符号都可以自由定制，非常适合需要交互的折叠面板和长文摘要。

动态方案：ResizeObserver与框架集成

在上面的原生JavaScript方案基础上，可以进一步封装成Vue或React组件，以响应式数据驱动截断状态。核心思路不变：用一个容器引用，在mounted和更新时计算内容高度，然后设置一个布尔值决定是否应用截断类。React中可以使用useLayoutEffect来减少闪烁，配合ref和state。

以下是一个React组件的核心逻辑示例：

import { useRef, useState, useLayoutEffect } from 'react';
function Truncate({ children, rows = 3 }) {
  const ref = useRef(null);
  const [overflow, setOverflow] = useState(false);
  const [expanded, setExpanded] = useState(false);
  useLayoutEffect(() => {
    const el = ref.current;
    if (!el) return;
    const check = () => {
      setOverflow(el.scrollHeight > el.clientHeight);
    };
    check();
    const ro = new ResizeObserver(check);
    ro.observe(el);
    return () => ro.disconnect();
  }, [children, rows]);
  return (
    <div className={expanded ? 'truncate expanded' : 'truncate'}>
      <div
        ref={ref}
        className="truncate-content"
        style={{ maxHeight: expanded ? 'none' : `${rows * 1.6}em` }}
      >
        {children}
      </div>
      {overflow && (
        <button onClick={() => setExpanded(!expanded)}>
          {expanded ? '收起' : '展开'}
        </button>
      )}
    </div>
  );
}

这段代码将行数作为参数传入，动态计算max-height。ResizeObserver监听内容尺寸变化，当窗口缩放或字体加载完成导致高度改变时，能重新判断溢出状态。组件只在真正溢出时渲染按钮，避免多余交互元素。类似逻辑可以迁移到Vue的watch和nextTick中。

需要注意的是，max-height设置为行数乘以行高，必须保证line-height是固定值，否则计算结果会不准确。如果使用自定义字体加载后行高发生微小变化，最好在load事件后再触发检查。此外，ResizeObserver在IE浏览器中不可用，需要引入polyfill或者降级为只监听resize事件。

方案对比与选型建议

综合来看，多行截断没有银弹，选择哪种方案取决于具体场景。如果只是简单列表，三行内有省略号即可，-webkit-line-clamp最省事，代码量最小。如果设计上不允许出现省略号，需要淡出效果，首选mask-image或伪元素渐变遮罩，但要处理好背景色兼容。如果还需要展开收起交互，或者不确定文本是否溢出，就必须借助JavaScript来精确控制。

为了更直观地比较，下面用表格列出三种主要方案的特点：

在实际项目中，还可以组合多种技巧。比如先使用-webkit-line-clamp隐藏多余内容，再通过JS监听scrollHeight来判断是否溢出，如果溢出才显示自定义淡出遮罩或按钮。这样既能保留原生截断的性能优势，又能满足视觉和交互要求。希望本文提供的方案能帮你告别千篇一律的省略号，做出更贴合设计稿的多行文本处理效果。