html代码:
<div>
<span>文本标题:</span>
<span>这里显示判决结果,文本可以超过一行,超过后换行。这里显示判决结果,文本可以超过一行,超过后换行。这里显示判决结果,文本可以超过一行,超过后换行。这里显示判决结果,文本可以超过一行,超过后换行。这里显示判决结果,文本可以超过一行,超过后换行。这里显示判决结果,文本可以超过一行,超过后换行。这里显示判决结果,文本可以超过一行,超过后换行。这里显示判决结果,文本可以超过一行,超过后换行。这里显示判决结果,文本可以超过一行,超过后换行.这里显示判决结果,文本可以超过一行,超过后换行。这里显示判决结果,文本可以超过一行,超过后换行.
</span>
</div>
css代码:
div span:nth-child(2){
display: inline-block;
font-family: 'PingFangSC-Regular';
font-size: .14rem;
color: #333333;
letter-spacing: 0;
font-weight: 400;
line-height: .24rem;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-align: left;
}
js代码:
function chuliText() {
// 处理页面中字体内容超过3行...并出现查看更多
let text = $("div span:nth-child(2)");
let hg = text.css("line-height").split("p")[0];
let g = text.css("height").split("p")[0];
let text2 = text.text();
if ((hg * 3).toFixed(0) == g*1) {
text.html(
text2.slice(0, 160) +
"..." +
'<a style="color:blue;cursor: pointer;" class="more">查看更多</a>'
);
}
// 点击查看更多或者收起
text.click(function (e) {
if (e.target.className == "more") {
text.css({ "-webkit-line-clamp": "10000" });
text.html(
text2 + '<a style="color:blue;cursor: pointer;" class="up">收起</a>'
);
} else if (e.target.className == "up") {
text.css({ "-webkit-line-clamp": "3" });
text.html(
text2.slice(0, 160) +
"..." +
'<a style="color:blue;" class="more">查看更多</a>'
);
}
});
}
实现效果: