美化你的文章或者新闻列表,多出内容以 “...” 省略号代替

美化成一行,多出的省略号显示

.style{
    
    
	white-space: nowrap;
	text-overflow:ellipsis; 
	overflow:hidden;
}

美化成2行,多余省略号

.style{
    
    
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

定制化高度,多出省略号

$(".figcaption").each(function(i){
    
    
 	//var divH = $(this).children('p').height();
 	var $p = $("p", $(this)).eq(0);
 	while ($p.outerHeight() > 32) {
    
    
	     $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
	 }
 }

猜你喜欢

转载自blog.csdn.net/qq_39453402/article/details/107548068