本代码展示最多显示3行,每行行高16px,3行总高48px,4行总高64px
当文本行数大于3行,显示“更多”
CSS:
#CourseDesc { margin-top: 5px; font-size: 12px; position: relative; max-height: 48px; line-height: 16px; overflow: hidden; } #CourseDesc .temp { position: absolute; top: -16px; left: 0; right: 0; max-height: 64px; line-height: 16px; overflow: hidden; color: transparent; } #CourseDesc .temp span { position: absolute; top: 48px; right: 0; color: #B7B7C5; background: #4F4F73; } #CourseDesc .temp span b { color: #08F; }
HTML:
<div id="CourseDesc"></div>
JQuery 页面加载后:
$("#CourseDesc").html($("#CourseDesc").text() + '<div class="temp">' + $("#CourseDesc").text() + '<span>…<b onclick="Show()">更多</b></span></div>')
JQuery 取值:
function Show() {
var more = $("#CourseDesc .temp span").html(); $("#CourseDesc .temp span").remove(); var v = $("#CourseDesc .temp").text(); $("#CourseDesc .temp").append('<span>' + more + '</span>');
}
标签:多行,16px,span,temp,color,CourseDesc,JS,height,CSS From: https://www.cnblogs.com/kandyvip/p/17916254.html