先来说一般写法 兼容谷歌火狐 不兼容ie
{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; (希望显示N行-webkit-line-clamp的变为N)
-webkit-box-orient: vertical;
}
兼容ie的写法 目前没有特别好的纯样式可以兼容ie 我们就要考虑用js来处理
<div class="item">
<div class="img" style="background-image: url('../images/cms/index/xy/1.png');">
<div class="cover">
<div class="l_tit">院系简介</div>
<div class="desc">
11培养拥护党的基本路线,适应视觉传达及平面艺术设计行业生产、有创新精神、基本技能和 专业技能22印刷品的设计与制作的高端技能型人专门1才2。培养拥护党的基本路线,适应视觉传达及平面艺术设计行业生产、有创新精神、基本技能和专业技能的,11111111印刷品的设计与制作的高端技能型人专门才。11培养拥护党的基本路线,适应视觉传达及平面艺术设计行业生产、有创新精神、基本技能和专业技能22印刷品的设计与制作的高端技能型人专门1才2。培养拥护党的基本路线,适应视觉传达及平面艺术设计行业生产、有创新精神、基本技能和专业技能的,11111111印刷品的设计与制作的高端技能型人专门才。
</div>
</div>
</div>
<div class="tit">
自动化工程系11
</div>
</div>
$(function () {
var content_arr = []; //定义一个空数组
$('.desc').each(function () { //遍历box内容
var content = $.trim($(this).text()); //去掉前后文空格
content_arr.push(content); //内容放进数组
})
for (var i = 0; i < content_arr.length; i++) { //遍历循环数组
if (content_arr[i].length >= 97) { // 判断文本长度是否大于预设长度
content = content_arr[i].substr(0, 97) + '...'; //添加省略号并放进box文字内容后面
$(".desc").eq(i).text(content);
} else {
content = content_arr[i];
$(".desc").eq(i).text(content);
}
}
})