html中文本超过两行进行省略并添加按钮进行展开收起

可以使用CSS中的text-overflow和white-space属性来实现文本省略和展开收起的效果，同时添加一个按钮来控制展开和收起。

首先，在HTML中，我们需要创建一个包含文本内容的元素和一个展开/收起按钮：

<div class="text">
  <!-- 文本内容 -->
</div>
<button class="toggle-btn">展开/收起</button>

然后，在CSS中，我们可以设置text-overflow属性为ellipsis来实现文本省略。同时，white-space属性设置为nowrap，可以让文本不换行。当需要展开时，我们将white-space属性设置为normal，让文本可以自动换行。

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text.expand {
  white-space: normal;
}

.toggle-btn {
  display: block;
  margin-top: 10px;
}

接下来，我们需要使用JavaScript来实现按钮的点击事件，控制文本的展开和收起。我们可以使用classList属性来添加或删除类名，从而改变元素的样式。

const text = document.querySelector('.text');
const btn = document.querySelector('.toggle-btn');

btn.addEventListener('click', function() {
  text.classList.toggle('expand');
  if (btn.innerText === '展开') {
    btn.innerText = '收起';
  } else {
    btn.innerText = '展开';
  }
});

完整的代码如下：

<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id nulla sit amet diam suscipit convallis. Morbi vestibulum volutpat libero. Sed mauris felis, sodales nec magna vel, fermentum pharetra justo. Ut volutpat feugiat enim, id ullamcorper purus bibendum eu. Duis consectetur lacus sit amet orci interdum, vel posuere lacus sagittis. Curabitur ante lacus, cursus eu ligula vel, congue ultrices nulla. Aliquam vel lacus at nisi euismod iaculis. Nulla euismod pretium quam vel iaculis. Integer rutrum magna nibh, et volutpat velit vulputate vel. Praesent tempus dictum sapien, vitae fermentum lacus mattis vel.

  Nunc euismod, sapien sed hendrerit finibus, velit lacus sodales magna, vitae maximus augue nulla a quam. Nam auctor augue in nunc rhoncus, sit amet posuere enim bibendum. Sed vel odio risus. Sed pulvinar, elit in aliquet commodo, justo dolor blandit tellus, ut pellentesque elit mi quis est. In hac habitasse platea dictumst. Etiam at nisl turpis. Sed quis dolor euismod, rhoncus elit quis, bibendum dui. Donec euismod, lacus vel egestas lobortis, lorem augue luctus neque, at bibendum magna sem ac sapien. Donec eget turpis laoreet, faucibus est vel, luctus odio. Sed accumsan, metus vel placerat mattis, arcu nisi bibendum nisi, quis aliquam ipsum enim eget ex.

  Aenean euismod libero id lectus dignissim imperdiet. Sed nulla urna, iaculis sit amet varius eu, consectetur sit amet leo. Proin mattis, augue nec gravida mattis, odio augue tincidunt sapien, ac suscipit velit ipsum id felis. Sed sagittis tellus vel risus condimentum, vel eleifend leo vehicula. Suspendisse potenti. Suspendisse potenti. Aenean tristique ligula quis enim convallis, quis rhoncus nibh malesuada. Aliquam ac euismod neque. Nam pulvinar efficitur bibendum. Proin et nunc nec elit rhoncus malesuada. Mauris quis nibh sed nunc dictum sodales. Sed sit amet tempor nisi. Sed maximus mi ut enim lobortis, id ornare eros facilisis.
</div>
<button class="toggle-btn">展开</button>

<style>
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text.expand {
  white-space: normal;
}

.toggle-btn {
  display: block;
  margin-top: 10px;
}
</style>

<script>
const text = document.querySelector('.text');
const btn = document.querySelector('.toggle-btn');

btn.addEventListener('click', function() {
  text.classList.toggle('expand');
  if (btn.innerText === '展开') {
    btn.innerText = '收起';
  } else {
    btn.innerText = '展开';
  }
});
</script>