原文:https://blog.csdn.net/janessssss/article/details/80450819
//单行文本溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
这种方法适用范围只局限与浏览器内核是webkit的,不兼容ie
//多行文本溢出显示省略号
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
下面这种方法是可行的,可以兼容ie
p { position: relative; line-height: 17px; overflow: hidden; } .p-after:after{ content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -moz-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(left, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }
js
$(function(){ //获取文本的行高,并获取文本的高度,假设我们规定的行数是五行,那么对超过行数的部分进行限制高度,并加上省略号 $('p').each(function(i, obj){ var lineHeight = parseInt($(this).css("line-height")); var height = parseInt($(this).height()); if((height / lineHeight) >5 ){ $(this).addClass("p-after") $(this).css("height","85px"); }else{ $(this).removeClass("p-after"); } }); })