大家应该都知道用text-overflow:ellipsis
属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width
属性。
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。
WebKit浏览器或移动端的页面
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp
;注意:这是一个 不规范的属性(),它没有出现在 CSS 规范草案中。
-webkit-line-clamp
用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。查看 text-overflow
属性文档:https://www.7psus5.com/book/css/webkit/text/line-clamp.htm
常见结合属性:
display: -webkit-box;
必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient
必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。text-overflow: ellipsis;
,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。查看 `text-overflow` 属性文档:https://www.7psus5.com/book/css/properties/user-interface/text-overflow.htm
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。
具体例子可以查看https://www.7psus5.com/book/css/webkit/text/line-clamp.htm
跨浏览器兼容的方案
比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;
例如:
p { position:relative; line-height:1.4em; /* 3 times the line-height to show 3 lines */ height:4.2em; overflow:hidden; } p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px; background:url(/newimg88/2014/09/ellipsis_bg.png) repeat-y; }
看demo:
See the Pen by feiwen8772 () on .0
这里注意几点:
- height高度真好是
line-height
的3倍; - 结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
- IE6-7不显示
content
内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用<span class="line-clamp">...</span>
去模拟; - 要支持IE8,需要将
::after
替换成:after
;
JavaScript 方案
用js也可以根据上面的思路去模拟,实现也很简单,推荐几个做类似工作的成熟小工具:
1.Clamp.js
下载及文档地址:
使用也非常简单:
var module = document.getElementById("clamp-this-module"); $clamp(module, {clamp: 3});
DEMO:
See the Pen by () on .
2.jQuery插件-jQuery.dotdotdot
这个使用起来也很方便:
$(document).ready(function() { $("#wrapper").dotdotdot({ // configuration goes here }); });
下载及详细文档地址:或
参考:
相关推荐
2.CSS常见问题
3.CSS教程
学习,网站改变太多了。刚进来以为进错地方了。
ps…广告太多了。
归纳的挺全啊。点赞
不错,收藏了
文章不错,不过以前好像看过这么一篇类似文章,好像出自张鑫旭的博客,没有去证实。
感觉这个站没有以前可爱了。ps:广告多了点啊。
跨浏览器兼容那个,假如内容是从后台读取的,没超过三行的时候,岂不是也加了三个点在第三行最后?除非不指定行高和高度,那又怎样判断超过三行末尾显示省略号呢
会, 这个问题可以通过再加一个不定高的标签来解决(overflow:hidden), 伪元素加在这个element上并绝对定位, 行数不够三秆的时候就看不到。
但是假如当前文字够了三行,第三行没显示满并不需要截断的时候, … 依然会显示 。 冏冏了
麻烦的是火狐和ie没这几个属性
只能用js了
还有就是规定字数,用js截取也是一个办法
$(function(){
$(“.overf”).each(function(){
var maxwidth=36;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+’…’);
}
});
})
推荐这个,用起来很简单
同问
666
小白的我,看的一愣一愣的