单行省略和多行省略...

单行设置样式如下

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

多行样式设置

第一种方式

p{text-overflow: ellipsis; //可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
overflow : hidden;
display: -webkit-box;//必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;//必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。}

第二种方式

跨浏览器兼容比较高
比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

p {    
    position:relative;  
    line-height:1.4em; 
    /* 3 times the line-height to show 3 lines */   
     height:4.2em;   
      overflow:hidden;
      }
p::after {  
      content:"...";   
       font-weight:bold;  
       position:absolute;   
        bottom:0;   
        right:0;   
         padding:0 20px 1px 45px;
}