css文本省略（…） 文本超出内容区显示省略号

一.   单行文本省略

<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;
    }

注意：

实现多行文本显示了。

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

1. display: -webkit-box;  将对象作为弹性伸缩盒子模型显示 。
2. -webkit-box-orient:vertival; 设置或检索伸缩盒对象的子元素的排列方式 。值vertival为（从上向下垂直排列子元素）;
3. -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 可以得出有没有超出省略。可以在元素后面添加一个“更多”按钮，点击展开被省略的信息。