请选择 进入手机版 | 继续访问电脑版

程序人生

 找回密码
 注册

QQ登录

只需一步,快速开始

程序人生 门户 前端程序员 Css 查看内容

CSS文字过多显示省略号

2016-11-24 17:26| 发布者: sean| 查看: 423| 评论: 0

摘要: CSS文字过多显示省略号的写法在CSS中,如果某行文字、多行文字过长,则需要用省略号代替,可以使用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号,对于多行,在移动端(绝大部分是WebKit内核的浏览器) ...
CSS文字过多显示省略号的写法
在CSS中,如果某行文字、多行文字过长,则需要用省略号代替,可以使用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号,对于多行,在移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp。
一、单行文字过多显示省略号
//单行
.single{
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
}

 
二、多行文字过多显示省略号
可以使用-webkit-line-clamp ,但是-webkit-line-clamp是一个不规范的属性,它没有出现在 CSS 规范草案中。-webkit-line-clamp是WebKit的CSS扩展属性,适用于移动端内核为WebKit的浏览器
 .more{
    display:-webkit-box !important;
    overflow:hidden;
    text-overflow:ellipsis;
    work-break;break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; //指定行数
}

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

相关分类


关于程序人生网|小黑屋|手机版|Archiver|

程序人生 | QQ

粤公网安备 44040202000007号

( 粤ICP备13038131号-5 )

返回顶部