JS+CSS多行文本显示“更多”

本代码展示最多显示3行，每行行高16px，3行总高48px，4行总高64px

当文本行数1-3行，正常显示；当文本行数大于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>');
}