如何用JavaScript判断CSS属性webkit-line-clamp是否生效？

要判断-webkit-line-clamp是否生效（即文本是否被截断），核心逻辑是对比元素的实际内容总高度和容器可见高度——当内容被截断时，实际高度会超过容器的可见高度。

完整实现代码 #

HTML

<div class="clamped-text" id="text-clamp">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

<span class="show-more">Show more</span>

CSS

.clamped-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    width: 300px;
}

.show-more {
   display: none;
}

.show-more.clamped {
  display: block;
}

JavaScript

const clampedText = document.getElementById('text-clamp');
const showMore = document.querySelector('.show-more');

function checkClampState() {
  // 对比滚动高度（内容总高度）和可见高度，判断是否截断
  const isClamped = clampedText.scrollHeight > clampedText.clientHeight;
  showMore.classList.toggle('clamped', isClamped);
}

// 页面加载时执行一次判断
checkClampState();

// 监听窗口大小变化，避免容器宽度改变导致截断状态变化
window.addEventListener('resize', checkClampState);

关键逻辑说明 #

• scrollHeight：元素内容的总高度（包含被overflow: hidden隐藏的部分）
• clientHeight：元素的可见高度（包含内边距，不包含滚动条、边框）
• 当scrollHeight > clientHeight时，说明文本被-webkit-line-clamp截断，此时给.show-more添加clamped类使其显示
• 监听resize事件是为了适配窗口宽度变化的场景（比如窗口变宽后文本不再需要截断，此时要隐藏"Show more"）

注意事项 #

• 确保元素的overflow属性为hidden，否则scrollHeight会和clientHeight一致，无法判断截断状态
• 元素的内边距（padding）不会影响判断，因为scrollHeight和clientHeight都会包含内边距的高度

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