CSS两行溢出如何实现自动展开功能？-css教程-PHP中文网

CSS两行溢出如何实现自动展开功能？

碧海醫心

发布： 2025-03-16 09:58:11

原创

1064人浏览过

css两行溢出如何实现自动展开功能？

CSS两行文本溢出自动展开功能实现

在网页设计中，经常需要将文本限制在一定行数内显示，并提供“展开”功能以查看完整内容。本文将探讨如何使用CSS和JavaScript实现两行文本溢出自动展开的功能。

CSS -webkit-line-clamp 属性可以限制文本行数，但它本身不提供展开功能。我们需要结合JavaScript来检测文本是否溢出，并动态显示“展开”按钮。

以下CSS代码将文本限制在两行，并添加省略号：

.text-container {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

登录后复制

JavaScript代码则负责检测文本是否溢出：

立即学习“前端免费学习笔记（深入）”；

const textContainers = document.querySelectorAll('.text-container');

textContainers.forEach(container => {
  const text = container.textContent;
  const hasOverflow = container.scrollHeight > container.clientHeight;

  if (hasOverflow) {
    // 显示展开按钮
    const expandButton = document.createElement('button');
    expandButton.textContent = '展开';
    expandButton.addEventListener('click', () => {
      container.style.webkitLineClamp = 'unset';
      expandButton.remove();
    });
    container.parentNode.insertBefore(expandButton, container.nextSibling);
  }
});

登录后复制

这段代码首先选择所有具有.text-container 类的元素。然后，它遍历每个元素，检查其 scrollHeight (实际高度) 是否大于 clientHeight (可见高度)。如果大于，则表示文本溢出，创建并插入一个“展开”按钮。点击按钮后，移除 -webkit-line-clamp 限制，显示完整文本并移除按钮。

为了更完善的用户体验，可以考虑以下改进：