看了几篇文章感觉都很麻烦,还是自己写一下吧
<div
class="info"
style="position: relative;width: calc(100% - 100px)"
>
<p style="padding-right:6px" class="info-title">
{{ item.text }}
<img
class="down"
@click="e => upDown('down', e)"
src="@/icons/svg/down.svg"
alt=""
/>
<img
class="up"
@click="e => upDown('up', e)"
src="@/icons/svg/up.svg"
alt=""
/>
</p>
</div>
//获取了数据页面渲染完之后执行
function xx(){
const arr = [...document.getElementsByClassName("info-title")];
arr.forEach((item, index) => {
console.log(item.clientHeight);
if (item.clientHeight > 30) {
item.classList.add("expand");
} else {
item.classList.add("noellipsis");
}
});
}
function upDown(state, e) {
console.log(state, e.target);
console.log(e.target.parentNode);
if (state == "down") {
e.target.parentNode.classList.remove("expand");
e.target.parentNode.classList.add("retract");
}
if (state == "up") {
e.target.parentNode.classList.remove("retract");
e.target.parentNode.classList.add("expand");
}
}
.info {
width: 100%;
.info-title {
position: relative;
.hidden {
display: none;
}
}
.noellipsis {
.down {
display: none;
}
.up {
display: none;
}
}
.expand {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.down {
position: absolute;
right: 4px;
top: 4px;
}
.up {
display: none;
}
}
.retract {
.down {
display: none;
}
.up {
display: inline;
}
}
}
如果多行隐藏的话。
.expand
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
改为
overflow: hidden;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
之后调整.down 的top