使用JavaScript实现文本收起展开(省略)功能

在JavaScript中实现文本的收起展开（省略）功能，通常需要结合HTML和CSS来完成。以下是实现这一功能的步骤：

HTML结构

首先，你需要一个HTML结构来表示文本内容以及展开和收起的按钮。

<div class="text-container">
  <p class="text">这是一段很长的文本，需要进行收起和展开操作。</p>
  <button class="toggle-btn">更多</button>
</div>

CSS样式

然后，添加一些CSS来控制文本的显示和按钮的样式。

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

.text {
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示的行数 */
  -webkit-box-orient: vertical;
  height: 4.2em; /* 根据行数和行高计算高度 */
}

.toggle-btn {
  display: none;
  margin-top: 10px;
  cursor: pointer;
}

JavaScript逻辑

最后，用JavaScript来控制文本的显示和隐藏，以及按钮的显示。

document.addEventListener('DOMContentLoaded', function() {
  var text = document.querySelector('.text');
  var toggleBtn = document.querySelector('.toggle-btn');

  toggleBtn.addEventListener('click', function() {
    if (text.style.overflow === 'hidden') {
      text.style.overflow = 'visible';
      text.style.height = 'auto';
      toggleBtn.textContent = '收起';
    } else {
      text.style.overflow = 'hidden';
      text.style.height = '4.2em'; // 根据CSS中设置的高度
      toggleBtn.textContent = '更多';
    }
  });

  // 监听窗口大小变化，以适应文本内容变化
  window.addEventListener('resize', function() {
    if (window.innerWidth < 600) {
      toggleBtn.style.display = 'block';
    } else {
      toggleBtn.style.display = 'none';
    }
  });
});

这段代码首先等待DOM内容加载完成，然后为“更多”按钮添加点击事件监听器。当按钮被点击时，它会切换文本的显示状态。此外，还监听了窗口大小变化，以适应不同屏幕大小下的显示需求。

请注意，-webkit-line-clamp属性是非标准的，并且只在WebKit和Blink引擎的浏览器中有效（例如Chrome、Safari、新版的Edge）。如果你需要更广泛的浏览器支持，可能需要使用JavaScript来模拟这一行为。