文本超出两行显示省略号并有“展开”“收起”按钮效果

这个效果可以通过CSS和JavaScript实现。可以使用CSS的text-overflow属性来控制文本超出一定长度后的显示方式，再配合JavaScript实现展开和收起的效果。

下面是一个简单的实现方式：

CSS部分：

.text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

JavaScript部分：

var btn = document.getElementById("btn");
var text = document.getElementById("text");

btn.onclick = function() {
  if (text.className == "text") {
    text.className = "";
    btn.innerHTML = "收起";
  } else {
    text.className = "text";
    btn.innerHTML = "展开";
  }
}

HTML部分：

<div id="text" class="text">
  这里是需要超出两行的文本内容，超出部分会被省略号代替。
</div>
<button id="btn">展开</button>

当文本超出两行时，会显示省略号，同时在文本下方显示一个“展开”按钮。点击按钮后，文本会展开显示全部内容，并将按钮文字改为“收起”。再次点击按钮，文本会收起并显示省略号，按钮文字也会变为“展开”。