多行文本省略，并且判断是否需要省略。

文字超出省略使用率非常高。特别是在移动端设备上。
一、单行省略
p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }这个相信很简单。

二、多行省略<div>
这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。
</div>

div {
width:200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

这时就可以实现多行文本显示了。

该效果是通过弹性盒模型来实现的，这就要注意兼容性方面的问题了。

display: -webkit-box;

  将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient:vertival;

设置或检索伸缩盒对象的子元素的排列方式 。值vertival为（从上向下垂直排列子元素）;

-webkit-line-clamp:2;

块元素显示的文本的行数。

①、 display:box;  要加上浏览器前缀，兼容性还是可以的。例如：
display : -webkit-box;
display : -moz-box;
display : -ms-flexbox;
display : -o-box;
display : box;②、box-orient: vertical;  也要加上浏览器前缀。-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-o-box-orient: vertical;
box-orient: vertical; 支持情况



③、-webkit-line-clamp的兼容性就会差一些了



IE、Firefox并不兼容该属性，不过在移动端主流浏览器方面的兼容性还是蛮不错的。

三、检测是否需要省略 var oDiv = document.getElementsByTagName('div')[0];
if (oDiv.scrollHeight > oDiv.clientHeight) {
console.log('有省略号')
}
/*
clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小（大多是视口大小）
scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）
offsetHeight: 偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距）
*/通过比较标签元素的scrollHeight 和 clientHeight 可以得出有没有超出省略。可以在元素后面添加一个“更多”按钮，点击展开被省略的信息。这个也是现在很多网页在用的功能。