常用浏览器css简单实现：
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
IE我用js实现该效果：
用js设置元素的高度，隐藏掉溢出部分。
元素高度 = 行高 * 行数。
利用元素的after属性来表示三个点“。。。”；
用绝对定位固定位置；
用css渐变增强特效。
代码：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 100px;
/*常用浏览器css简单实现*/
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
border: solid 1px red;
}
.text {
line-height: 14px;
font-size: 14px;
overflow: hidden;
position: relative;
margin: 15px auto;
}
.texter {
height: 28px;
}
.texter:after {
content: ' ... ';
position: absolute;
bottom: 0;
right: 0;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oList = document.querySelectorAll('.text')
for(var i = 0; i < oList.length; i++) {
var oHeight = oList[i].offsetHeight
// 兼容IE 这里 edge 返回false
if(!!window.ActiveXObject || "ActiveXObject" in window) {
// 设置文字右边距，空出三个点的位置
oList[i].style.paddingRight = 10 + 'px'
oHeight = getComputedStyle(oList[i])['height']
// 利用正则提取数字，将非数字的部分‘px’删除
oHeight = oHeight.replace(/[^0-9]/ig, '')
// 设置元素高度(这里显示两行文字，行高14px)，隐藏溢出部分
if((oHeight / 14) > 2) {
oList[i].className = 'text texter'
oList[i].setAttribute('className', 'text texter')
}
}
}
}
</script>
</head>
<body>
<div class="text">
哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒多多多多多多多
</div>
<div class="text">
哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒多多多多多多多
</div>
</body>
效果图：
edge：
IE8+：
学习小记 ，，，有更好的方法请多指教！！！