多行文本溢出显示省略号(…)全攻略

10年服务1亿前端开发工程师

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。

WebKit浏览器或移动端的页面

在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。查看 text-overflow 属性文档:http://www.css88.com/book/css/webkit/text/line-clamp.htm

常见结合属性:

  1. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  2. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
  3. text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。查看 `text-overflow` 属性文档:http://www.css88.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内核的)浏览器。

具体例子可以查看http://www.css88.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(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}

看demo:

See the Pen 多行文本溢出显示省略号(…) by feiwen8772 (@feiwen8772) on CodePen.0

这里注意几点:

  1. height高度真好是line-height的3倍;
  2. 结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
  3. IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用<span class="line-clamp">...</span>去模拟;
  4. 要支持IE8,需要将::after替换成:after

JavaScript 方案

用js也可以根据上面的思路去模拟,实现也很简单,推荐几个做类似工作的成熟小工具:

1.Clamp.js

下载及文档地址:https://github.com/josephschmitt/Clamp.js
使用也非常简单:

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

DEMO:

See the Pen Line Clampin’ by 愚人码头 (@feiwen8772) on CodePen.

2.jQuery插件-jQuery.dotdotdot

这个使用起来也很方便:

$(document).ready(function() {
    $("#wrapper").dotdotdot({
        //  configuration goes here
    });
});

下载及详细文档地址:https://github.com/BeSite/jQuery.dotdotdothttp://dotdotdot.frebsite.nl/

参考:
http://www.cssmojo.com/line-clamp_for_non_webkit-based_browsers/#what-can-we-do-across-browsers
http://css-tricks.com/line-clampin/


如果你觉得本文对你有帮助,那就请分享给更多的朋友
关注「前端干货精选」加星星,每天都能获取前端干货
赞(6) 打赏
未经允许不得转载:WEB前端开发 » 多行文本溢出显示省略号(…)全攻略

评论 19

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    学习,网站改变太多了。刚进来以为进错地方了。
    ps…广告太多了。

    行者4年前 (2014-09-30)回复
  2. #-48

    归纳的挺全啊。点赞

    bukas4年前 (2014-10-03)回复
  3. #-47

    不错,收藏了

    Web前端之家4年前 (2014-10-07)回复
  4. #-46

    文章不错,不过以前好像看过这么一篇类似文章,好像出自张鑫旭的博客,没有去证实。

    感觉这个站没有以前可爱了。ps:广告多了点啊。

    jruif4年前 (2014-10-08)回复
  5. #-45

    跨浏览器兼容那个,假如内容是从后台读取的,没超过三行的时候,岂不是也加了三个点在第三行最后?除非不指定行高和高度,那又怎样判断超过三行末尾显示省略号呢

    吉志江4年前 (2015-05-13)回复
    • 会, 这个问题可以通过再加一个不定高的标签来解决(overflow:hidden), 伪元素加在这个element上并绝对定位, 行数不够三秆的时候就看不到。
      但是假如当前文字够了三行,第三行没显示满并不需要截断的时候, … 依然会显示 。 冏冏了

      Wei Mengxi8个月前 (04-13)回复
  6. #-44

    麻烦的是火狐和ie没这几个属性
    只能用js了

    琦书屋3年前 (2015-10-23)回复
  7. #-43

    还有就是规定字数,用js截取也是一个办法

    刘康2年前 (2016-06-29)回复
  8. #-42

    $(function(){
    $(“.overf”).each(function(){
    var maxwidth=36;
    if($(this).text().length>maxwidth){
    $(this).text($(this).text().substring(0,maxwidth));
    $(this).html($(this).html()+’…’);
    }
    });
    })

    刘康2年前 (2016-06-29)回复
  9. #-41

    推荐这个,用起来很简单 https://github.com/XindaSayHi/xdlines

    Maker2年前 (2017-04-18)回复
  10. #-40

    同问

    kagol11个月前 (01-10)回复
  11. #-39

    666

    nicksonlvqq8个月前 (04-21)回复
  12. #-38

    小白的我,看的一愣一愣的

    泉水的迷弟4周前 (11-19)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏