css文本超出隐藏显示省略号 实现一行两行多行

css文本超出隐藏显示省略号 实现一行两行多行

看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：

• 兼容性好，对各大主流浏览器有好的支持

• 响应式截断，根据不同宽度做出调整

• 文本超出范围才显示省略号，否则不显示省略号

• 省略号位置显示刚好

• 基于上述的准则，下面我就讲介绍各种技巧实现截断效果

一行省略实现,用css:

overflow:hidden; //超出文本隐藏
 
white-space:nowrap; //溢出不换行
 
text-overflow:ellipsis; //溢出省略号显示

属性浏览器原生支持，各大浏览器兼容性好，缺点就是只支持单行文本截断，并不支持多行文本截取。

适用场景：单行文字截断最简单实现，效果最好，放心使用。

如果是多行文字截取效果，实现起来就没有那么轻松。

-webkit-line-clamp 实现

两行或多行省略实现,用css3:

            

              {{v.FaultDescription}}
            
            
            

              {{v.Detail}}
            
          

overflow:hidden; //超出文本隐藏

text-overflow:ellipsis; //溢出省略号显示

display:-webkit-box; //将对象作为弹性伸缩盒子

-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式-从上到下垂直排列

-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，数组代表显示的行数,如2,3,4....

原理是超出第二行就增加三个点点点,后面的内容依然输出页面,只是超出隐藏了

----------------------------------------------------------------------------------------------------------------------------------------

    
    

      

        

          
          

            

              {{item.desc}}
            
            
              2981
              
            
          
        
      
      

    
  

 

max-width: 5.62rem;display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;

复制即可使用。