css文字两行或者几行显示省略号

一行显示否则省略号 

.line-clamp1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

两行显示多则显示省略号

.line-clamp2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

 

下面是直接可以拿来看效果的代码 需要设置宽度的 

    
    
    
    
    




    
    

        
        

            
 
                
面朝大海,春暖花开
                

                    从明天起，做一个幸福的人 喂马、劈柴，周游世界                
                    从明天起，关心粮食和蔬菜 我有一所房子，面朝大海，春暖花开                               
                    从明天起，和每一个亲人通信 告诉他们我的幸福  那幸福的闪电告诉我的
                    我将告诉每一个人 给每一条河每一座山取一个温暖的名字 陌生人，我也为你祝福 愿你有一个灿烂的前程 愿你有情人终成眷属 愿你在尘世获得幸福