如何在卡片描述未超出3行时隐藏「点击展开」Tooltip

要实现只有当描述内容超出3行时才显示「点击展开」Tooltip，核心是判断元素的实际内容高度是否超过了容器的显示高度——因为响应式布局下容器宽度变化会影响行数，CSS的-webkit-line-clamp没法直接提供这个状态，得用JS来检测。

具体实现步骤 #

• 编写检测函数：对比描述元素的scrollHeight（内容实际高度）和clientHeight（容器显示高度），如果scrollHeight > clientHeight，说明内容被截断，显示Tooltip；否则隐藏。
• 页面加载完成后执行一次检测，确保初始状态正确。
• 监听窗口resize事件，窗口尺寸变化时重新检测（适配响应式布局的宽度变化）。
• 如果有动态加载描述内容的场景，要在内容加载完成后重新执行检测。

代码示例 #

HTML结构（参考）

<div class="card">
  <h3 class="card-title">卡片标题</h3>
  <input type="text" class="card-input" placeholder="输入内容">
  <p class="card-description">这里是卡片描述内容...</p>
  <span class="expand-tooltip">点击展开</span>
</div>

CSS调整

.card-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.expand-tooltip {
  display: none; /* 默认隐藏Tooltip */
  cursor: pointer;
  color: #0066cc;
}
.expand-tooltip.show {
  display: inline-block; /* 需要时显示 */
}

JS实现

// 检测单个卡片的描述是否截断
function checkDescriptionTruncation(card) {
  const description = card.querySelector('.card-description');
  const tooltip = card.querySelector('.expand-tooltip');
  if (!description || !tooltip) return;

  // 比较实际内容高度和容器显示高度
  const isTruncated = description.scrollHeight > description.clientHeight;
  tooltip.classList.toggle('show', isTruncated);
}

// 批量检测所有卡片
function checkAllCards() {
  const cards = document.querySelectorAll('.card');
  cards.forEach(checkDescriptionTruncation);
}

// 页面加载时检测
document.addEventListener('DOMContentLoaded', checkAllCards);

// 窗口 resize 时重新检测（防抖避免频繁触发）
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(checkAllCards, 200);
});

// 如果有动态加载内容，比如异步获取描述后，调用 checkAllCards() 即可

注意事项 #

• 防抖处理：窗口resize时加个定时器，避免频繁触发检测，提升性能。
• 元素获取：确保选择器和你的实际DOM结构匹配，比如.card、.card-description这些类名要对应。
• 兼容性：scrollHeight和clientHeight是标准属性，所有现代浏览器都支持，不用担心兼容问题。

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