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

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

更多 2016/11/23 来源:css学习浏览量:1729
学习标签: CSS文本溢出
本文导读:在CSS中,如果某行文字、多行文字过长,则需要用省略号代替,可以使用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号,对于多行,在移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp。

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

 

 
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; //指定行数
}

 

收藏
174
很赞
294