前端css实现多行文字的展开收起

实现多行文字的展开收起，可以通过CSS和JavaScript来完成。

首先，利用CSS的text-overflow属性来控制文本的显示方式，当文本超出指定的显示范围时，可以将多余的文本隐藏起来，并用省略号来代替。

其次，使用JavaScript来实现展开和收起的功能，当点击展开按钮时，将被隐藏的文本显示出来；当点击收起按钮时，将多余的文本隐藏起来。

以下是一个示例代码：

HTML：

<div class="text-container">
  <p class="text">这是一段需要展开和收起的文本，可以通过CSS和JavaScript来实现。</p>
  <button class="btn-expand">展开</button>
  <button class="btn-collapse">收起</button>
</div>

CSS：

.text-container {
  position: relative;
  overflow: hidden;
  max-height: 100px; /* 设置文本的最大高度 */
}

.text {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  text-overflow: ellipsis; /* 超出文本范围时用省略号代替 */
  white-space: nowrap;
  overflow: hidden;
}

.btn-expand,
.btn-collapse {
  position: absolute;
  bottom: 0;
  right: 0;
  display: none;
}

.btn-expand {
  display: block;
}

.text-container.expanded .btn-expand {
  display: none;
}

.text-container.expanded .btn-collapse {
  display: block;
}

JavaScript：

var textContainer = document.querySelector('.text-container');
var text = document.querySelector('.text');
var btnExpand = document.querySelector('.btn-expand');
var btnCollapse = document.querySelector('.btn-collapse');

btnExpand.addEventListener('click', function() {
  textContainer.classList.add('expanded');
});

btnCollapse.addEventListener('click', function() {
  textContainer.classList.remove('expanded');
});

以上代码实现了一个简单的多行文字展开收起的效果，可以根据实际需求进行调整。