如何避免多行文本截断时的单词断行（结合text-overflow）

原生的-webkit-line-clamp是基于视觉行高度截断文本的，不会考虑单词边界，所以会出现你遇到的单词被从中间截断的情况。要实现「单词即将被截断时完全隐藏该单词，省略号加在前一个单词后」的需求，需要用JavaScript来处理，下面是具体实现方案：

实现思路 #

1. 保留原容器的固定宽高、行高样式，但去掉原生的省略配置
2. 将文本拆分为单个单词的数组
3. 逐步把单词拼接到临时容器中，实时检查高度是否超过原容器的最大允许高度
4. 当拼接后高度超出限制时，停止拼接，给最后一个完整单词加上省略号，替换原内容

完整代码示例 #

CSS #

#head {
    width: 300px;
    font-size: 20px;
    line-height: 1.5; /* 明确行高，方便计算最大高度 */
    max-height: calc(20px * 1.5 * 4); /* 行高×行数，等于4行的总高度 */
    overflow: hidden;
}

HTML #

<!DOCTYPE html>
<html>
<body>
    <div id="head">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
    </div>
</body>
</html>

JavaScript #

const truncateTextByWords = () => {
    const container = document.getElementById('head');
    const originalText = container.textContent.trim();
    const words = originalText.split(/\s+/); // 按空格拆分单词
    const maxHeight = container.offsetHeight;
    // 创建临时容器，复制原容器的样式
    const tempContainer = document.createElement('div');
    tempContainer.style.cssText = `
        width: ${container.offsetWidth}px;
        font-size: ${getComputedStyle(container).fontSize};
        line-height: ${getComputedStyle(container).lineHeight};
        position: absolute;
        visibility: hidden;
        white-space: pre-wrap;
    `;
    document.body.appendChild(tempContainer);

    let truncatedText = '';
    for (let i = 0; i < words.length; i++) {
        const currentText = truncatedText ? `${truncatedText} ${words[i]}` : words[i];
        tempContainer.textContent = currentText;
        // 如果临时容器高度超过限制，停止拼接
        if (tempContainer.offsetHeight > maxHeight) {
            break;
        }
        truncatedText = currentText;
    }
    // 只有当内容被截断时才添加省略号
    if (truncatedText !== originalText) {
        container.textContent = `${truncatedText}...`;
    }
    document.body.removeChild(tempContainer);
};

// 页面加载完成后执行，窗口大小变化时重新适配
window.addEventListener('load', truncateTextByWords);
window.addEventListener('resize', truncateTextByWords);

说明 #

• 该方法确保最后显示的都是完整单词，不会出现截断问题
• 监听窗口大小变化，可适配响应式场景
• 如果需要支持带连字符的单词或其他语言，可调整拆分单词的正则表达式

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