一. 单行文本省略
<p class="box">今天天气好晴朗，处处好风光 。</p> .box{ width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }二.多行文本省略
<p class="box">今天天气好晴朗，处处好风光 。</p> .box{ 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 可以得出有没有超出省略。可以在元素后面添加一个“更多”按钮，点击展开被省略的信息。
