css3多行文本多行文本缩略点击更多展开显示全部

在CSS中，可以使用-webkit-line-clamp属性配合display: -webkit-box和-webkit-box-orient: vertical来实现多行文本的缩略，并通过JavaScript来实现点击更多按钮后展开全文的效果。

以下是实现该功能的示例代码：

HTML:

<div class="text-container">
  <p class="text">这里是一段很长的文本，需要显示为多行文本，并且在最后显示一个“更多”按钮。点击后可以展开全文。</p>
  <button class="read-more-btn">更多</button>
</div>

CSS:

.text-container {
  overflow: hidden;
  position: relative;
  line-height: 1.5em;
}
 
.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 定义文本的最大显示行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.read-more-btn {
  display: none; /* 默认隐藏按钮 */
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px 10px;
}
 
.text-container .text::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

JavaScript:

document.querySelector('.read-more-btn').addEventListener('click', function() {
  var container = this.parentNode;
  container.classList.remove('text-container'); // 移除缩略样式
  this.style.display = 'none'; // 隐藏“更多”按钮
});

在上述代码中，.text-container 是包含文本和按钮的容器。.text 类定义了多行文本，并使用 -webkit-line-clamp 来限制显示的行数。按钮默认是隐藏的，只有当文本被缩略时才会显示。点击按钮后，通过JavaScript移除缩略样式并隐藏按钮。