css如何把超出部分隐藏，显示省略号

欧阳锋

废话不多说，直接上代码实例：

只显示一行

1. <div class="line">
   
2.     <p>
   
3.         一般自己写项目时， 一个接口URL 就可以了。但在实际项目开发中，一个项目可能会请求不同的服务器的url，这时，我们简单的配置下访问接口域名，然后不同域名的接口，直接换对象调用即可，这样不管有多少个不同的接口，我们都可以很好的管理使用。
   
4.     </p>
   
5. </div>
   
6. 
   
7. <style>
   
8. .line{
   
9.     width: 400px;
   
10. }
    
11. .line p{
    
12.     line-height: 40px;
    
13.     overflow:hidden;
    
14.     white-space:nowrap;
    
15.     text-overflow:ellipsis;
    
16. }
    
17. </style>

复制代码

固定高度

方法一：

1. <div class="block">
   
2.     <p>
   
3.         在Vue 项目开发中，我们与接口打交道最多了，如何来优雅的使用Axios变得尤为重要了。 通常我们通过客户端向后端发送请求来接收接口数据，然后将这些接口数据完美的呈现到网页上。
   
4.     </p>
   
5. </div>
   
6. 
   
7. <style>
   
8. .block{
   
9.     width: 400px;
   
10.     height: 80px;
    
11.     position: relative;
    
12.     overflow: hidden;
    
13. }
    
14. .block p{
    
15.     line-height: 40px;
    
16. }
    
17. .block:after {
    
18.     content: "...";
    
19.     position: absolute;
    
20.     bottom: 12px;
    
21.     right: 0px;
    
22.     padding-left: 20px;
    
23.     background: -webkit-linear-gradient(right, transparent, #fff 50%);
    
24.     background: -o-linear-gradient(right, transparent, #fff 50%);
    
25.     background: -moz-linear-gradient(right, transparent, #fff 50%);
    
26.     background: linear-gradient(to right, transparent, #fff 50%);
    
27. }
    
28. </style>

复制代码

方法二（推荐）：

1. <div class="block">
   
2.     <p>
   
3.         在Vue 项目开发中，我们与接口打交道最多了，如何来优雅的使用Axios变得尤为重要了。 通常我们通过客户端向后端发送请求来接收接口数据，然后将这些接口数据完美的呈现到网页上。
   
4.     </p>
   
5. </div>
   
6. <style>
   
7. .block{
   
8.     width: 100%;
   
9.     font-size: 14px;
   
10.     line-height: 18px;
    
11.     display: -webkit-box;
    
12.     overflow: hidden;
    
13.     text-overflow: ellipsis;
    
14.     -webkit-line-clamp: 2;
    
15.     -webkit-box-orient: vertical;
    
16. }
    
17. </style>

复制代码