Untitled

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>


	<h2>假设目标是是 3行 溢出则结尾 ...</h2>
	<h5>那么在元素中写刚好是3行的文本，审查它是多高, 比如是67px, 那么4行的文本肯定是大于68px，那么我们设置元素的max-height为68px，用于js判断</h5>
	<br>

	<div class="box">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>

	<style>
		*{margin:0;padding:0;word-break:break-all;}
		.box{
			border: 1px solid red;
			width: 200px;
			max-height: 68px;
			overflow: hidden;
		}


		.ellipsis{
			position: relative;
			max-height: 67px;
		}
		.ellipsis::after{
			content: "...";
			position: absolute;
			width: 16px;
			bottom: 3px;
			right: 0;
			background: #fff;
		}
	</style>


<script src="./jquery-1.9.1.min.js"></script>
<script>

	// 如果div.box高度大于等于max-height: 67px;的67说明溢出了，需要添加一个伪类模拟文本 '...'
	if( $('.box').height()>=68 ){
		$('.box').addClass('ellipsis');
	}

</script>


<!--
	bug：
	有种可能是，文本刚好是3行，但是没有溢出，这样尾部也会添加一个'...'

	改进:
	同样假设是3行
	那么我们去设置比3行文本高个1px的max-height
	比如那么3行的高度大概是67px
	那么我们设置max-height为68px，js中就判断大于等于68px，说明是4行文本，肯定超过3行，说明溢出
	然后在添加的类中设置回max-height又为67px

 -->

</body>
</html>