元素多行超出高度省略号的相关设置

页面含有文字的某一部分要求超出以省略号结尾，并隐藏其他内容。

设置一行超出隐藏

CSS

	.text-box{
		text-overflow: ellipsis;//文字溢出为省略号
		white-space: nowrap;//设置文字一行内显示
		overflow: hidden;
	}

多行文字设置只显示前几行

CSS（适用于webkit浏览器和手机端）

<style>
	.text-box{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;//设置显示的行数
		overflow: hidden;
	}
</style>

Javascript

多行超出高度省略号结尾

<style>
	.text{
		width: 500px;
		height: 50px; //必须设置外部元素高度
		border: 1px solid #ddd;
		margin: 30px;
		padding: 15px;
	}
</style>
<div class="text">
	<p>No matter what mood you're in, what kind of day you had, or where you are, smile —— <br />关关雎鸠，在河之洲。
窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p>
</div>
<div class="text">
	<p>No matter what mood you're in, what kind of day you had, or where you are, smile —— <br />关关雎鸠，在河之洲。
窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。</p>
</div>
<script>
	$('.text').each(function(){
		var divH = $(this).height();
		var $p = $(this).find("p").eq(0);
		while($p.outerHeight() > divH){
			$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
		}
	})
</script>

结果：