css超出显示省略号

1.单行文本显示省略号
overflow: hidden; 超出隐藏
white-space: nowrap;文字不换行
text-overflow:ellipsis;隐藏的部分用...表示
2.多行文本显示省略号

p {
  overflow:hidden; 
  text-overflow:ellipsis;                    
  display:-webkit-box;   设置为弹性盒子模型                   
  -webkit-box-orient:vertical;    内容为竖直排列            
  -webkit-line-clamp:2;  显示两行文字
}

但是 -webkit-box-orient:vertical会存在失效的情况，可使用下面几行代码替换

           /* autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */

如果还是不生效可以替换为

  -webkit-box-orient: vertical;

  /* autoprefixer: on */```
这种方法适合webkit内核的浏览器，也可以使用定位和带(...)的元素。

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