css实现多行文本的展开收起

在CSS中，可以使用-webkit-line-clamp属性配合display: -webkit-box和-webkit-box-orient: vertical来实现多行文本的展开和收起功能。以下是实现这一功能的基本样式和HTML结构：

CSS样式：

.text-collapse {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 定义文本的最大行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  max-height: 4.5em; /* 行高*最大行数，根据实际行高调整 */
  line-height: 1.5em; /* 根据实际行高调整 */
  cursor: pointer;
  /* 可以添加更多样式，如颜色、字体等 */
}
 
.text-collapse-hidden {
  max-height: 4.5em; /* 根据实际行高调整 */
}

HTML结构：

<div class="text-collapse" id="textCollapse">
  这里是一段很长的文本内容，可能有很多行。这里是一段很长的文本内容，可能有很多行。
  这里是一段很长的文本内容，可能有很多行。这里是一段很长的文本内容，可能有很多行。
</div>
<button onclick="toggleText()">展开/收起</button>

JavaScript代码：

function toggleText() {
  var textCollapse = document.getElementById('textCollapse');
  textCollapse.classList.toggle('text-collapse-hidden');
}

在这个例子中，-webkit-line-clamp设置为3，意味着文本最多只会显示3行。当用户点击按钮时，通过JavaScript来切换.text-collapse-hidden类，从而改变元素的max-height属性，实现展开或收起的效果。如果需要在移除text-collapse-hidden类时恢复为收起状态，可以在CSS中将.text-collapse-hidden的max-height设置为与-webkit-line-clamp对应的最大高度。