多行文本进行截断有哪些实用的奇淫巧技

多行文本截断是前端页面布局中经常遇到的需求，当文本内容超过指定行数时，需要隐藏超出部分并显示省略号，保证页面布局整齐美观。不同的场景对截断的要求不同，我们可以选择不同的实现方案。

纯CSS实现多行文本截断

基于-webkit-line-clamp的方案

这是目前最常用的多行文本截断CSS方案，依赖WebKit内核的私有属性，兼容性覆盖大部分现代浏览器，实现方式简单。

/* 多行文本截断样式 */
.multi-line-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 指定显示的行数，这里设置为3行 */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 可选：设置固定高度，避免内容过少时高度异常 */
    line-height: 24px;
    max-height: 72px; /* 行高 * 行数，这里24*3=72 */
}

需要注意的是，-webkit-box-orient: vertical属性在一些构建工具处理时可能会被自动删除，需要在打包配置中做对应的保留处理，或者改用内联样式设置该属性。

利用浮动和定位的兼容方案

如果需要兼容不支持WebKit私有属性的浏览器，可以使用浮动和定位组合的方案实现多行截断，不过这种方案实现逻辑相对复杂。

/* 兼容更多浏览器的多行截断方案 */
.float-truncate {
    position: relative;
    line-height: 24px;
    max-height: 72px; /* 3行高度 */
    overflow: hidden;
    padding-right: 1em; /* 给省略号预留空间 */
}
.float-truncate::after {
    content: "...";
    position: absolute;
    right: 0;
    bottom: 0;
    background: #fff; /* 背景色需要和父容器背景色一致，避免遮挡文本 */
    padding-left: 4px;
}

这种方案的缺点是省略号的位置可能不够精准，当文本最后一行刚好满行时，省略号可能会和文本重叠，需要根据实际场景调整样式参数。

JavaScript实现多行文本截断

当CSS方案无法满足需求，比如需要根据字符数截断、需要支持展开收起功能时，可以使用JavaScript实现更灵活的多行文本截断逻辑。

基于DOM测量的截断方案

这种方案通过动态创建临时DOM元素，测量文本在不同行数下的高度，判断是否超出限制，逐步调整截断位置。

/**
 * 多行文本截断函数
 * @param {HTMLElement} element 需要截断的文本容器
 * @param {number} lineNum 最大显示行数
 * @param {string} ellipsis 省略号内容，默认是...
 */
function multiLineTruncate(element, lineNum, ellipsis = '...') {
    const lineHeight = parseInt(getComputedStyle(element).lineHeight);
    const maxHeight = lineHeight * lineNum;
    // 如果内容高度没有超过最大高度，不需要截断
    if (element.scrollHeight <= maxHeight) {
        return;
    }
    const originalText = element.textContent;
    let left = 0;
    let right = originalText.length;
    // 二分查找合适的截断位置
    while (left < right) {
        const mid = Math.floor((left + right) / 2);
        element.textContent = originalText.slice(0, mid) + ellipsis;
        if (element.scrollHeight <= maxHeight) {
            left = mid + 1;
        } else {
            right = mid;
        }
    }
    // 最终截断文本，避免超出
    element.textContent = originalText.slice(0, left - 1) + ellipsis;
}
// 使用示例
const textElement = document.querySelector('.js-truncate-text');
multiLineTruncate(textElement, 3);

支持展开收起的增强方案

很多场景下需要截断后支持点击展开查看完整内容，我们可以基于上面的截断逻辑增加展开收起功能。

/**
 * 支持展开收起的多行文本截断
 * @param {HTMLElement} element 文本容器
 * @param {number} lineNum 最大行数
 */
function truncateWithToggle(element, lineNum) {
    const lineHeight = parseInt(getComputedStyle(element).lineHeight);
    const maxHeight = lineHeight * lineNum;
    const originalText = element.textContent;
    // 如果不需要截断，直接返回
    if (element.scrollHeight <= maxHeight) {
        return;
    }
    // 创建展开收起按钮
    const toggleBtn = document.createElement('span');
    toggleBtn.textContent = '展开';
    toggleBtn.style.color = '#1890ff';
    toggleBtn.style.cursor = 'pointer';
    toggleBtn.style.marginLeft = '4px';
    // 先执行截断
    let isExpanded = false;
    const ellipsis = '...';
    let truncateIndex = originalText.length;
    const tempElement = document.createElement('div');
    tempElement.style.cssText = `visibility:hidden;position:absolute;line-height:${lineHeight}px;width:${element.offsetWidth}px;`;
    document.body.appendChild(tempElement);
    // 查找截断位置
    let left = 0;
    let right = originalText.length;
    while (left < right) {
        const mid = Math.floor((left + right) / 2);
        tempElement.textContent = originalText.slice(0, mid) + ellipsis;
        if (tempElement.scrollHeight <= maxHeight) {
            left = mid + 1;
        } else {
            right = mid;
        }
    }
    truncateIndex = left - 1;
    document.body.removeChild(tempElement);
    // 设置截断内容
    element.textContent = originalText.slice(0, truncateIndex) + ellipsis;
    element.appendChild(toggleBtn);
    // 点击切换展开收起
    toggleBtn.addEventListener('click', () => {
        if (isExpanded) {
            element.textContent = originalText.slice(0, truncateIndex) + ellipsis;
            element.appendChild(toggleBtn);
            toggleBtn.textContent = '展开';
        } else {
            element.textContent = originalText;
            element.appendChild(toggleBtn);
            toggleBtn.textContent = '收起';
        }
        isExpanded = !isExpanded;
    });
}

不同方案的选择建议

我们可以根据实际项目需求选择合适的多行文本截断方案，以下是不同方案的对比：

在实际开发中，优先选择纯CSS方案，当CSS方案无法满足需求时再考虑JavaScript实现，这样可以在保证功能的同时尽量减少性能损耗。

CSS多行截断webkit_line_clampJavaScript文本截断ellipsis修改时间：2026-06-20 04:15:40