css两行文本省略点击展开

如果你想在CSS中实现两行文本的省略并添加点击展开功能，你可以使用CSS的伪元素和JavaScript来实现。以下是一个示例：

HTML代码：

<div class="text-container">
  <div class="text-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed purus vel lectus fringilla tincidunt.
  </div>
  <div class="expand-button">展开</div>
</div>

CSS代码：

.text-container {
  position: relative;
  max-height: 3em;
  overflow: hidden;
}

.text-content {
  position: relative;
  line-height: 1.5em; /* 设置行高 */
  max-height: 3em; /* 设置最大高度 */
  margin-right: -1em; /* 留出省略号空间 */
  padding-right: 1em; /* 留出省略号空间 */
}

.text-content::after {
  content: "..."; /* 添加省略号 */
  position: absolute;
  right: 0;
  bottom: 0;
}

.expand-button {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
  color: blue;
  cursor: pointer;
}

JavaScript代码：

document.querySelector('.expand-button').addEventListener('click', function() {
  var textContent = document.querySelector('.text-content');
  
  if (textContent.classList.contains('expanded')) {
    textContent.classList.remove('expanded');
    this.textContent = '展开';
  } else {
    textContent.classList.add('expanded');
    this.textContent = '收起';
  }
});

这个例子中，我们使用了CSS的`max-height`和`overflow`属性来限制文本显示的高度，并添加了省略号。通过点击"展开"按钮，我们使用JavaScript添加或移除`.expanded`类来切换文本的展开和收起状态。在CSS中，通过`.expanded`类来取消对文本内容的限制，实现完全显示文本的效果。