如何用HTML、CSS和JS实现仅显示首行文本的可折叠卡片

CSS 实现单行截断 #

通过 CSS 的 line-clamp 属性实现默认只显示第一行文本，无需拆分原有元素：

.element {
  background-color: grey;
  margin-bottom: 0.7rem;
  padding: 1.4rem;
  border-radius: 10px;
  cursor: pointer; /* 给可交互卡片添加光标提示 */
}

.longText {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 强制只显示1行 */
  -webkit-box-orient: vertical;
  transition: all 0.2s ease; /* 可选：添加展开收起的过渡动画 */
}

/* 展开后的样式 */
.longText.expanded {
  -webkit-line-clamp: unset; /* 取消行数限制 */
  height: auto;
}

JS 处理点击逻辑 #

通过对比文本元素的 scrollHeight（内容总高度）和 clientHeight（可见高度），仅对多行文本响应点击展开/收起：

// 遍历所有卡片
document.querySelectorAll('.element').forEach(card => {
  const longText = card.querySelector('.longText');
  
  // 单行文本直接跳过，移除点击光标
  if (longText.scrollHeight <= longText.clientHeight) {
    card.style.cursor = 'default';
    return;
  }

  // 绑定点击切换展开状态
  card.addEventListener('click', () => {
    longText.classList.toggle('expanded');
  });
});

核心优势 #

• 保持原有 HTML 结构完整，无需拆分文本元素，大量卡片场景下更易维护
• 通过原生属性判断文本行数，逻辑精准，避免无效点击
• 类切换的方式性能开销极低，适合批量卡片渲染
• line-clamp 已被主流浏览器（Chrome、Firefox、Edge）支持，兼容性足够覆盖绝大多数场景

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