css实现点击展开剩余字

当文本内容过长时，我们通常采用省略号来显示部分内容，但如果想要用户点击展开查看全部内容，可以使用CSS实现，下面是示例代码：

<div class="text">
  <p>这是一段过长的文本内容，需要用省略号来截断展示，但如果想查看完整内容，请点击展开按钮。</p>
  <a href="#" class="expand-btn">展开</a>
</div>

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-Box;
  -webkit-line-clamp: 3;
  -webkit-Box-orient: vertical;
}
.expand-btn {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: #007aff;
}
.text.expand {
  overflow: visible;
  height: auto;
}
.text.expand .expand-btn {
  display: none;
}

CSS实现内容截取功能，可通过text-overflow:ellipsis属性来实现，并设置截取的最大行数，通过给“展开”按钮添加事件，再通过JavaScript将“展开”按钮的父元素div的高度设置为auto，实现展开剩余内容的效果，代码如下：

var expandBtn = document.querySelector('.expand-btn');
var text = document.querySelector('.text');

expandBtn.addEventListener('click',function(){
  text.classList.add('expand');
});

这样，在点击“展开”按钮后，就能够展开内容了。