如何用CSS和JavaScript实现文字三行省略并显示“详情”按钮？

要实现文字在三行后省略并显示“详情”按钮，你可以使用CSS来控制文本的显示，并结合JavaScript来处理按钮的点击事件。以下是实现步骤：

1. HTML结构

首先，创建一个包含文本和“详情”按钮的HTML结构。

<div class="text-container">
  <p class="text-content">
    这是一段很长的文本内容，超过三行时会显示省略号，并出现“详情”按钮。
  </p>
  <button class="details-button">详情</button>
</div>

2. CSS样式

使用CSS来控制文本的显示，使其在三行后省略，并隐藏“详情”按钮（当文本未超过三行时）。

.text-container {
  position: relative;
  width: 300px; /* 根据需要调整宽度 */
}

.text-content {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.details-button {
  display: none; /* 默认隐藏“详情”按钮 */
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border: none;
  cursor: pointer;
  color: blue;
}

/* 当文本超过三行时显示“详情”按钮 */
.text-content.truncated + .details-button {
  display: block;
}

3. JavaScript逻辑

使用JavaScript来检测文本是否超过三行，并根据情况添加或移除类名来控制“详情”按钮的显示。

document.addEventListener("DOMContentLoaded", function() {
  const textContent = document.querySelector('.text-content');
  const detailsButton = document.querySelector('.details-button');

  // 检测文本是否超过三行
  function checkTextOverflow() {
    if (textContent.scrollHeight > textContent.clientHeight) {
      textContent.classList.add('truncated');
    } else {
      textContent.classList.remove('truncated');
    }
  }

  // 初始检测
  checkTextOverflow();

  // 窗口大小变化时重新检测
  window.addEventListener('resize', checkTextOverflow);

  // 点击“详情”按钮时展开文本
  detailsButton.addEventListener('click', function() {
    textContent.style.webkitLineClamp = 'unset';
    textContent.classList.remove('truncated');
    detailsButton.style.display = 'none';
  });
});

4. 解释

• CSS部分：

  • -webkit-line-clamp: 3; 限制文本显示为三行。
  • overflow: hidden; 和 text-overflow: ellipsis; 用于在文本超出时显示省略号。
  • .text-content.truncated + .details-button 选择器用于在文本超过三行时显示“详情”按钮。

• JavaScript部分：

  • checkTextOverflow 函数用于检测文本是否超过三行，并根据结果添加或移除 truncated 类。
  • 点击“详情”按钮时，移除 -webkit-line-clamp 的限制，使文本完全展开，并隐藏“详情”按钮。

5. 兼容性

• -webkit-line-clamp 是一个非标准的CSS属性，主要在现代浏览器中支持（如Chrome、Safari、Edge等）。如果需要兼容更多浏览器，可能需要使用其他方法（如通过JavaScript计算行数）。

通过以上步骤，你可以实现文字在三行后省略并显示“详情”按钮的效果。