文本的溢出部分省略号表示

一、单行文本溢出省略号表示 

1 p{
2     width: 100%;               //一定要设置宽度
3     overflow: hidden;          //溢出内容隐藏
4     white-space: nowrap;       //不换行
5     text-overflow: ellipsis;   //溢出部分用省略号显示  
6 }

二、多行文本溢出省略号表示

1、兼容大多数浏览器，但文本未超出也会显示省略号

 1 p {
 2     width: 100%;
 3     overflow: hidden;
 4     position: relative;
 5     line-height: 20px;
 6     height: 60px;                //高度为行高整数倍
 7 }
 8 p::after {
 9     content: "...";
10     font-weight: bold;
11     position: absolute;
12     bottom: 0;
13     right: 0;
14     padding: 0 20px 0 40px; 
15     background: -webkit-linear-gradient(left, transparent, #fff 55%);
16     background: -o-linear-gradient(right, transparent, #fff 55%);
17     background: -moz-linear-gradient(right, transparent, #fff 55%);
18     background: linear-gradient(to right, transparent, #fff 55%);
19     //从左到右由透明变成半透白
20 }

 2、只能用于WebKit浏览器及移动端

 

1 p{
2     display: -webkit-box;           //将对象作为弹性伸缩盒子模型显示 
3     -webkit-box-orient: vertical;   //设置或检索伸缩盒对象的子元素的排列方式
4     -webkit-line-clamp: 3;          //用来限制在一个块元素显示的文本的行数
5     overflow: hidden;
6 }