省略超出文章部分 超出部分加“…” 展开收起

方法一：加CSS样式

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

方法二：js获取字数

$(document).ready(function(){
	var absStr = "";
	var len=$("#articleAbstract").text().length;
	if($("#articleAbstract")!=null&& $("#articleAbstract").text().length>85){
		absStr=$("#articleAbstract").text().substr(0, 85)+"...";
		$("#articleAbstract").text(absStr);
	}
});

咨询回复 内容超过80 加“...” 点展开显示全部内容 点收起变回

 

	function getMore(obj,less,allContent,letterContent){
		
		$("#"+letterContent).css("height","auto");
		$(obj).css("display","none");
		$("#"+less).css("display","block");
		
		$("#"+letterContent).html($("#"+allContent).html());
		
	}
	
	function getLess(obj,more,allContent,letterContent){
		
		$("#"+letterContent).css("height","auto");
		$(obj).css("display","none");
		$("#"+more).css("display","block");
		
		var pContent = $("#"+letterContent).html();
		$("#"+letterContent).html(pContent.substring(0,80)+"...");
		
		
	}

回复：

 

 

<div style="margin: 10px 0;text-align: left;">
											<c:if test="${fn:length(letterbox.reply)>80}">
											<p id="letterReply${status.index + 1}" style="overflow:hidden; line-height: 20px;">
													 ${fn:substring(letterbox.reply,0,80)}...  
											</p>
											<div style="display:none;" id="allReply${status.index+1 }">${letterbox.reply }</div>
											<div id="more1${status.index + 1}" style="margin-right: 20px;float:right;font-size: 12px;line-height: 20px;color: #008385;" onclick="getMore(this,'less1${status.index + 1}','allReply${status.index+1 }','letterReply${status.index + 1}')" >
												展开<img style="margin-left: 10px;border: 0;position: relative;top: 3px;" src="<ph:root/>/s/images/index/home_search_more.png" ></div>
											<div id="less1${status.index + 1}" style="display:none;margin-right: 20px;float:right;font-size: 12px;line-height: 20px;color: #008385;" onclick="getLess(this,'more1${status.index + 1}','allReply${status.index+1 }','letterReply${status.index + 1}')" >
												收起<img style="margin-left: 10px;border: 0;position: relative;top: 3px;" src="<ph:root/>/s/images/index/home_search_more1.png" ></div>
											</c:if>
											<c:if test="${fn:length(letterbox.reply)<= 80}">
												<p id="letterReply${status.index + 1}" style="overflow:hidden; line-height: 20px;">
													${letterbox.reply }
												</p>
											</c:if>
										</div>

咨询：

 

 

<div style="margin: 5px 0;">
										<c:if test="${fn:length(letterbox.content)>80}">
											<p id="letterContent${status.index + 1}" style="overflow:hidden; line-height: 20px;">
													 ${fn:substring(letterbox.content,0,80)}...  
											</p>
											<div style="display:none;" id="allContent${status.index+1 }">${letterbox.content }</div>
											<div id="more${status.index + 1}" style="margin-right: 20px;float:right;font-size: 12px;line-height: 20px;color: #008385;" onclick="getMore(this,'less${status.index + 1}','allContent${status.index+1 }','letterContent${status.index + 1}')" >
												展开<img style="margin-left: 10px;border: 0;position: relative;top: 3px;" src="<ph:root/>/s/images/index/home_search_more.png" ></div>
											<div id="less${status.index + 1}" style="display:none;margin-right: 20px;float:right;font-size: 12px;line-height: 20px;color: #008385;" onclick="getLess(this,'more${status.index + 1}','allContent${status.index+1 }','letterContent${status.index + 1}')" >
												收起<img style="margin-left: 10px;border: 0;position: relative;top: 3px;" src="<ph:root/>/s/images/index/home_search_more1.png" ></div>
											
										</c:if>
										<c:if test="${fn:length(letterbox.content)<= 80}">
											<p id="letterContent${status.index + 1}" style="overflow:hidden; line-height: 20px;">
												${letterbox.content }
											</p>
										</c:if>
									</div>

方法三：通过获取行高

 

 

.more {
	margin-right: 20px;
	float: right;
	font-size: 12px;
	line-height: 16px;
	color: #e45147;
}

.less{
	margin-right: 20px;
	float: right;
	font-size: 12px;
	line-height: 16px;
	color: #e45147;
}
	
.more img,.less img{
	height: 5px;
    width: 10px;
    margin: 0 0 2px 3px;
}

function jockcountH(){
	$("#jokecontent").css("height","auto");
	var h=$("#jokecontent").height();
	if(h>100){
		$("#jokecontent").height(100);
		$(".more").css("display","block");
		$(".less").css("display","none");
	}else{
		$(".more").css("display","none");
		$(".less").css("display","none");
		$("#jokecontent").css("height","auto");
	}	
}

function getMore(){
	$(".more").css("display","none");
	$(".less").css("display","block");
	$("#jokecontent").css("height","auto");
}
function getLess(){
	$(".more").css("display","block");
	$(".less").css("display","none");
	$("#jokecontent").css("height","100");
}

<div id="jokecontent" class="font-size-12 font-color-gray mlr15" style="margin: 10px 15px;line-height: 20px;" >
						${jokemap.jokecontent}
					</div>	
					<div  class="less" style="display:none;margin-top: -6px;" onclick="getLess()" >收起<img src="../pages/jsp/actsub/images/red_up.png" ></div>
					<div  class="more" style="display:none;margin-top: -6px;" onclick="getMore()" >展开<img src="../pages/jsp/actsub/images/red_down.png" ></div>