专栏首页大前端_Web不定高多行溢出文本省略

不定高多行溢出文本省略

大家应该都知道用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 规范草案中。

常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现; 有个缺点:内容不够3行,末尾也会加省略号

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://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

JavaScript 方案

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

1.Clamp.js

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

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

2.jQuery插件-jQuery.dotdotdot

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浅谈 JS 创建对象的 8 种模式

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • 移动端Web页面常见问题解决

    经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960*640...

    空空云
  • 深入解析js中基本数据类型与引用类型,函数参数传递的区别

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • 在vue中使用stylus的混入

    用户4344670
  • 手把手教你查看和分析iOS的crash崩溃异常

    一个应用程序并不总会一直运行的很好,它总会有出现crash崩溃的情况。如果在应用程序中接入了一些第三方的crash收集工具或者自建crash收集报告平台的话将会...

    欧阳大哥2013
  • 使用Syncthing自建私有同步盘

    syncthing应该是目前开源界人气最高的一款了,这个主打私有,真的完全私有。。。没有公开分享的功能,并且同步必须要两端相互添加对方许可才行。

    砸漏
  • Syncthing就是我要的同步备份软件

    最开始的时候,我在路由器上开启 Samba,每次编辑完项目就手动拷贝到路由器硬盘里,麻烦程度可想而知,后来又用了 Google Drive/One Drive,...

    气象学家
  • 从10W个数中随机抽走2个数,求出那两个数是多少

    从1到10w(共10w个数)中随机抽走2个数,然后打乱剩下的数的顺序,问如果从这剩下的数中快速的找出抽走的是哪2个数?

    meteoric
  • 用python打印各种图形

    py3study
  • 一次性密码本-绝对不会被破译的密码

    一次性密码本即Vernam Cipher,是由Gilbert Vernam在1917年, 开发的一种加密算法。

    程序那些事

扫码关注云+社区

领取腾讯云代金券