css3--单行、多行文本溢出

 1 <style>
 2 .div1 {
 3     width: 200px;
 4     height: 200px;
 5     background: red url(img/user.png) no-repeat;
 6     text-overflow: ellipsis;
 7     white-space: nowrap;
 8     overflow: hidden;
 9 }
10 .div1:hover {
11     overflow: visible;
12     text-overflow: inherit;
13 }
14                 
15 </style>

1 <div class="div1">
2         qwe Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae voluptatem sapiente fuga facere molestias numquam officiis beatae ex sit atque aspernatur quisquam commodi ratione perspiciatis ducimus dolor minima itaque obcaecati!
3 </div>

 

方法一：只显示3行，在第三行结尾显示...

1 p{display: -webkit-box;
2 -webkit-box-orient: vertical;
3 -webkit-line-clamp: 3;
4 overflow: hidden;
5 }

方法二：适用性更广，未超出部分也会出现...

 1 p{
 2   position: relative;
 3   line-height: 20px; 
 4   max-height: 40px; /*是行高的整数倍，防止下行文字露出*/
 5   overflow: hidden;
 6 }
 7 
 8 p::after{
 9   content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
10   background: -webkit-linear-gradient(left, transparent, #fff 55%);
11   background: -o-linear-gradient(right, transparent, #fff 55%);
12   background: -moz-linear-gradient(right, transparent, #fff 55%);
13   background: linear-gradient(to right, transparent, #fff 55%);
14 }