HTML5技术

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

字号+ 作者:H5之家 来源:H5之家 2017-03-08 14:02 我要评论( )

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 css 代码: 但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的

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

css 代码:

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

WebKit浏览器或移动端的页面

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

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:

css 代码:

这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。

具体例子可以查看

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;

例如:

css 代码:

这里注意几点:

JavaScript 方案

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

1.Clamp.js

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

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

    2.jQuery插件-jQuery.dotdotdot

    这个使用起来也很方便:

    js 代码:

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

    参考:

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应) - h

      使用div模拟textarea,实现文本输入框高度自适应(附:js控制textare

      2017-01-12 12:10

    • (有趣)chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号的bug - 明lucky

      (有趣)chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号

      2016-12-23 12:00

    • HTML常用文本元素 - 艾前端

      HTML常用文本元素 - 艾前端

      2016-10-16 15:11

    • Bootstrap富文本编辑器-bootstrap-wysiwyg - dreampursuer

      Bootstrap富文本编辑器-bootstrap-wysiwyg - dreampursuer

      2016-06-01 17:00

    网友点评
    1