css 多行文本溢出隐藏，并且在最后面有查看更多的按钮

要实现多行文本溢出隐藏并在最后显示查看更多的按钮，可以使用CSS的-webkit-line-clamp属性结合display: -webkit-box和-webkit-box-orient: vertical来实现。以下是实现这种效果的CSS和HTML代码示例：

CSS:

.text-overflow {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 定义文本的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em; /* 3行x行高 = 12em */
  line-height: 1.5em;
  position: relative;
}
 
.view-more {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 20px;
  background-color: #f9f9f9;
  border-top: 1px dotted #d1d1d1;
  cursor: pointer;
}

HTML:

<div class="text-overflow">
  这里是一段很长的文本内容，如果超过了三行，那么超出的文本将会被隐藏，并且在最后显示一个查看更多的按钮。
  <!-- 文本内容 -->
</div>
<div class="view-more">查看更多</div>
 
<script>
  document.querySelector('.view-more').addEventListener('click', function() {
    this.remove();
  });
</script>

在这个例子中，.text-overflow类定义了文本溢出隐藏的行为，-webkit-line-clamp设置为3，表示文本会被截断在三行，并显示省略号。.view-more类定义了查看更多按钮的样式，它会在文本的最后一行显示，并且当用户点击它时，按钮会消失，显示出全部的文本内容。