如何优雅地用CSS和JavaScript实现文本多行显示、省略号和“详情”按钮的完美结合？

要实现文本的多行显示、省略号和“详情”按钮的完美结合，可以使用CSS和JavaScript来协同工作。以下是一个优雅的实现方案：

1. HTML结构

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

<div class="text-container">
  <p class="text-content">这是一段很长的文本内容，需要多行显示，并且在超出指定行数时显示省略号。点击“详情”按钮可以展开全部内容。</p>
  <button class="toggle-button">详情</button>
</div>

2. CSS样式

使用CSS来控制文本的多行显示和省略号效果。

.text-container {
  width: 300px; /* 设置容器的宽度 */
  position: relative;
}

.text-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 控制显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5; /* 设置行高 */
  max-height: 4.5em; /* 3行 * 1.5行高 */
  transition: max-height 0.3s ease;
}

.text-content.expanded {
  -webkit-line-clamp: unset;
  max-height: none;
}

.toggle-button {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: white;
  border: none;
  color: blue;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
}

3. JavaScript交互

使用JavaScript来处理“详情”按钮的点击事件，切换文本的展开和收起状态。

document.addEventListener('DOMContentLoaded', function() {
  const textContent = document.querySelector('.text-content');
  const toggleButton = document.querySelector('.toggle-button');

  toggleButton.addEventListener('click', function() {
    textContent.classList.toggle('expanded');
    toggleButton.textContent = textContent.classList.contains('expanded') ? '收起' : '详情';
  });
});

4. 解释

• CSS部分：

  • -webkit-line-clamp: 3; 用于限制文本显示的行数，超出部分显示省略号。
  • max-height: 4.5em; 用于控制文本的最大高度，确保只显示3行。
  • .text-content.expanded 类用于展开文本，取消行数限制和最大高度限制。

• JavaScript部分：

  • 通过监听“详情”按钮的点击事件，切换 .text-content 元素的 expanded 类，从而控制文本的展开和收起。
  • 按钮的文本内容也会根据文本的展开状态动态变化。

5. 最终效果

• 初始状态下，文本显示3行，超出部分显示省略号，并显示“详情”按钮。
• 点击“详情”按钮后，文本展开显示全部内容，按钮文本变为“收起”。
• 再次点击“收起”按钮，文本恢复为3行显示，按钮文本变为“详情”。

6. 兼容性

• -webkit-line-clamp 是一个WebKit特有的CSS属性，在现代浏览器中（如Chrome、Safari、Edge）支持良好。如果需要兼容更多浏览器，可以考虑使用JavaScript动态计算文本高度并截断。

7. 进一步优化

• 如果文本内容较短，不需要显示“详情”按钮，可以通过JavaScript动态判断文本是否需要截断，从而决定是否显示按钮。

document.addEventListener('DOMContentLoaded', function() {
  const textContent = document.querySelector('.text-content');
  const toggleButton = document.querySelector('.toggle-button');

  // 判断是否需要显示“详情”按钮
  if (textContent.scrollHeight > textContent.clientHeight) {
    toggleButton.style.display = 'inline-block';
  }

  toggleButton.addEventListener('click', function() {
    textContent.classList.toggle('expanded');
    toggleButton.textContent = textContent.classList.contains('expanded') ? '收起' : '详情';
  });
});

通过这种方式，你可以优雅地实现文本的多行显示、省略号和“详情”按钮的完美结合。