css 实现文字长列表超出一行 展示 展开收起

要实现文字长列表超出一行展示展开收起的效果，可以使用 CSS 的 `text-overflow` 属性和一些 JavaScript 代码来实现。下面是一个实现的示例：

HTML 结构：

<div class="long-list">
  <div class="content">这是一个很长的列表，可能超出一行。</div>
  <button class="toggle-btn">展开</button>
</div>

CSS 样式：

.long-list {
  max-height: 1.2em; /* 设置列表的最大高度为一行的高度 */
  overflow: hidden; /* 隐藏超出部分 */
  position: relative; /* 设置相对定位，用于定位展开按钮 */
}

.content {
  white-space: nowrap; /* 设置文本不换行 */
  overflow: hidden; /* 隐藏超出部分的文本 */
  text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
}

.toggle-btn {
  position: absolute; /* 设置绝对定位，用于定位展开按钮 */
  bottom: 0; /* 将展开按钮定位在列表底部 */
  right: 0; /* 将展开按钮定位在列表右侧 */
}

JavaScript 代码：

document.querySelector('.toggle-btn').addEventListener('click', function() {
  var longList = this.parentNode;
  if (longList.classList.contains('expanded')) {
    longList.classList.remove('expanded');
    this.textContent = '展开';
  } else {
    longList.classList.add('expanded');
    this.textContent = '收起';
  }
});

上述代码中，我们使用了 `text-overflow: ellipsis` 将超出一行的文本显示为省略号，然后通过 JavaScript 监听展开按钮的点击事件来切换列表的展开状态，并修改按钮的文本。

你可以根据需要调整样式和 JavaScript 代码，以适应你的项目需求。希望对你有所帮助！如果你还有其他问题，请随时提问。