首页 > 建站教程 > CSS3+HTML5 >  css多行文字超出显示点点点...-webkit-line-clamp详解正文

css多行文字超出显示点点点...-webkit-line-clamp详解

    在做网站的列表时,经常遇到文字强制在一行显示,超出则显示点点点,这个可以用后台语言限制字数,但是不建议这么做,因为非常不利于seo(标题只显示一部分),一行的话,用css还是比较好控制的,只要下面的代码就可以了:
.title{
    display:block;  /*或者inline-block*/
    width:100px;  /*必须有宽度,父容器有宽度也可以*/
    overflow:hidden; /*超出范围隐藏*/
    text-overflow:ellipsis; /*超出部分变成 ...*/
    white-space:nowrap;  /*不换行*/
}
    当然,这是一行,那么如果是多行呢?今天我爱模板网做的时候就遇到这个问题,标题下面的描述是两行,超出部分显示...,这个我爱模板网在之前就过解决办法,可以参考:借助js,实现多行文字超出显示点点点“...” 

    js的执行毕竟有延迟性,肯定没纯css好,那css有办法解决么?webkit下,的确有个很给力的属性:-webkit-line-clamp,下面简单介绍下这个属性:

    -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。作用是限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:
display: -webkit-box: 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient: 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: 可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。
语法:

-webkit-line-clamp:<number>   这里的number值是行数,正整数

兼容性:

-webkit-line-clamp

运行下面的代码查看效果(必须在webkit内核的浏览器下才有效果):


提示:您可以先修改部分代码再运行