css多行文字超出显示点点点...-webkit-line-clamp详解_CSS3教程,CSS3动画教程,HTML5教程,HTML5+教程,HTML5 PLUS教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

在做网站的列表时，经常遇到文字强制在一行显示，超出则显示点点点，这个可以用后台语言限制字数，但是不建议这么做，因为非常不利于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内核的浏览器下才有效果)：

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>css超出多行显示...-webkit-line-clamp案例</title> </head> <body> <p style=" overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; "> static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。fixed：对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。center：对象脱离常规流，使用top，right，bottom，left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。（CSS3）page：盒子的位置计算参照absolute。盒子在分页媒体或者区域块内，盒子的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） sticky：对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新 </p> </body> </html>
提示：您可以先修改部分代码再运行

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

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

猜你喜欢