您的位置:首页 > Web前端 > css > 正文

移动端文字过多显示省略号

更多 时间:2016-11-23 类别:Web前端 浏览量:799

移动端文字过多显示省略号

移动端文字过多显示省略号

一、单行文字过多显示省略号

 

  •  
  • CSS 代码   复制
  • 
    //单行
    .single{
       overflow:hidden;
       white-space:nowrap;
       text-overflow:ellipsis;
    }
    
    			
  •  

    二、多行文字过多显示省略号

    可以使用-webkit-line-clamp ,但是-webkit-line-clamp是一个不规范的属性,它没有出现在 CSS 规范草案中。-webkit-line-clamp是WebKit的CSS扩展属性,适用于移动端内核为WebKit的浏览器

     

  • CSS 代码   复制
  • 
    .more{
        display:-webkit-box !important;
        overflow:hidden;
        text-overflow:ellipsis;
        work-break;break-all;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; //指定行数
    }
    
    			
  •  

    标签:CSS文本溢出