浅谈CSS实现单、多行文本溢出时显示省略号

1、单行文本溢出：

(1)截断溢出文本：

---同时设置以下属性：

• width:*px;
• overflow: hidden;
• text-overflow:clip;  
• white-space: nowrap; 

(2)溢出文本显示省略号：

---同时设置以下属性：

• width:*px;
• overflow: hidden;
• text-overflow:ellipsis;  
• white-space: nowrap; 

2、多行文本溢出：

同时设置以下属性：

• width:*px;
• display:-webkit-box;
• overflow:hidden;
• -webkit-box-orient:vertical;  
• -webkit-line-clamp:*; 

-webkit-line-clamp用来限制在一个块元素显示文本的行数，需要结合WebKit属性display: -webkit-box和-webkit-box-orient属性 。

实现效果：

源代码：

  
  
      
          
          
          
      
      
        

			前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
		
        

			前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
		
		

			前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端