<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
#view{
border:1px solid red;
width:300px;
height: 100px;
}
</style>
</head>
<body>
<div id="view">
</div>
<script type="text/javascript">
var str="三块多飞机上肯定房价撒飞快就撒可富就是打上岛咖啡就撒开发就时的发生时的发生水电费萨法是打发水电费水电费水电费方法sad开发就sad上岛咖啡dfgdsdsgdgdsgdsgdfsgdfsgdfsgdfsgds dsgdfsgdf就撒咖啡就是啊开发是的方式点击咖啡"
var el = document.getElementById('view');
var n = el.offsetHeight; //取到当前包裹文本的父级元素的高度，
for(i=0; i<=n; i++){
el.innerHTML = str.substr(0, i); //表示在for循环中取出长度递增的文段
if(n < el.scrollHeight) {
//当前文本高度的内容的高度表明着恰好达到溢出的界限，
el.style.overflow = 'hidden'; //将父级元素设置为隐藏
el.innerHTML = str.substr(0, 45) + '......'; //从第0个字符开始截取，截取45个字符显示，剩余的用......替换
break;
}
}
</script>
</body>
</html>
