文本超出两行显示省略号并有“展开”“收起”按钮效果,按钮在省略号后面
时间: 2023-09-23 11:08:45 浏览: 52
要实现这个效果,只需要调整一下CSS中的样式即可。具体实现方式如下:
CSS部分:
```
.text {
display: -webkit-box;
-webkit-line-clamp: 2; /* 显示两行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; /* 超出部分用省略号表示 */
}
.expand-btn {
display: inline-block;
margin-left: 5px; /* 调整按钮与省略号的距离 */
color: blue;
text-decoration: underline;
cursor: pointer;
}
```
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>
<span id="text" class="text">
这里是需要超出两行的文本内容,超出部分会被省略号代替。
</span>
<span id="btn" class="expand-btn">展开</span>
</div>
```
这样,文本超出两行后,会在省略号后面显示一个“展开”按钮。点击按钮后,文本会展开,并将按钮文字改为“收起”。再次点击按钮,文本会收起,并将按钮文字改为“展开”。