专栏首页Dawnzhang的开发者手册超详细的文本溢出添加省略号。。。。

超详细的文本溢出添加省略号。。。。

前言

  需求:富文本溢出隐藏,超出用省略号表示。

  博主:文本溢出倒是做过不少,这富文本溢出什么鬼?老夫今天就好好研究一下这个省略号。

  ps:富文本溢出,不也是文本溢出么?空格处理?多段落?

正文

1.css写法

  1.1最简单的省略号(单行,溢出隐藏)

p{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}

  效果:

1.2 多行省略号

p{
display: -webkit-box;
-webkit-box-orient: vertical;

效果如下:

局限性:

使用webkit的css扩展属性(webkit是私有属性)-webkit-line-clamp

  因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端

  -webkit-line-clamp用来限制在一个块元素显示的文本的行数。限定了在第几行后面增加省略号。超出必须隐藏。

  将height设置为line-height的整数倍,防止超出的文字露出。

1.3多行省略号进阶版:

p{
position:relative;
line-height:1.4em;
/*设置容器高度为3倍行高就是显示3行*/
height:4.2em;
overflow:hidden;
}
p::after{
content:'...';
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 35px;
background:#fff;

效果:

原理:

  在右下角生产一个表示省略号的伪元素,绝对定位到指定宽高的容器右下角,实现多行溢出点点点。

  适用范围广泛,多浏览器兼容,不过不可表示富文本溢出

2.js实现超出文本省略号

方法一:多浏览器兼容,可表示富文本的文本溢出。

  2.1.clientHeightscrollHeight

  首先熟系入几个属性:ScrollTop、ScrollHeight、ClientHeight、OffsetHeight

  想搞懂这几个的请移步:https://github.com/iuap-design/blog/issues/38

  最后附上这些属性的详细解释的文档:

 其实我们就用到两个,clientHeightscrollHeight,哈哈,想不到吧。

clientHeight你可以简单的理解为元素的总的高度,当然也包括overflow样式属性导致的视图中不可见内容

scrollHeight为元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。不包括overflow样式属性导致的视图中不可见内容

  2.2 代码

<div id="aboutUs-content">在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code。
    都不用我安利VS code,大家就会乖乖的去用,无数个大言不惭的攻城狮,都被VS code比德芙还丝滑的强大功能所折服。
    我是来给大家安利插件的,想做个比较全面的插件集合给大家。网上的我也看过一些,但是都比较零散,时间也久了一些,我结合最近的情况,总结一下
造福大家,才是我想做的。手动比心❤。</div>
//js代码,获取元素的clientHeight、scrollHeight,当clientHeight < scrollHeight时,发生了溢出,

方法二,使用插件

1. Clamp.js

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

2. jQuery.dotdotdot

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

方法三:其他大神的做法:

多行溢出隐藏显示省略号功能的JS实现

javascript超过容器后显示省略号效果的方法(兼容一行或者多行)

结尾

  富文本溢出是一个坑,它里面有时会有多个段落等等。最好用js的方法。兼容多浏览器。

  看到这里的你,有没有更好的办法解决富文本溢出呢?假如富文本中有图片,需要判断富文本只有文字溢出时添加省略号,这又如何是好?

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 博客园博客排版(js样式实例)

    昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。妈呀,太漂亮了,二话不说赶快学起,昨天我花了一天的时间,终于把我的博客也弄得有一丢丢像样了,有好东西,...

    Dawnzhang
  • 数据结构与算法学习笔记之 复杂度分析

    大家都知道数据结构和英语,就如同程序员的两条腿一样;只有不断的积累,学习,拥有了健壮的“双腿”才能越走越远;在数据结构和算法的领域,不得不承认自己就是一只菜...

    Dawnzhang
  • 软件测试学习笔记-概念篇(一)

      每个系统的成型,上线都离不开测试,这段时间陆陆续续的学习测试,在这里总结一番;作为学习交流之用;

    Dawnzhang
  • 芝加哥大学校长:诺贝尔奖人才是怎样炼成的?

    大数据文摘
  • Docker&Container 转

    Docker是什么呢?简单点说,Docker就是一个Container的管理工具。 Container是什么呢?通俗的说,Container就是一个更轻量级的...

    阿dai学长
  • 等级保护2.0之移动互联安全要求、设计

    为什么要对《信息安全技术 网络安全等级保护基本要求》系列标准进行修改呢?还不是因为移动互联网的快速发展,导致原有的标准不适应新的要求!从这个侧面来说,等级保护2...

    安智客
  • PowerBI 已集成 AI 功能 零代码人人可用

    微软的使命是:赋能这个星球的每个人和组织,使他们获得更多。 你有感觉被微软赋能吗?如果你没有感觉到,那有两种可能:要么是你根本不知道不行动,要么是微软还需要努力...

    BI佐罗
  • day5(面向对象2)

    向上转型,向上转型 千万不要出现这样的操作,就是将父类对象转换成子类类型。 我们能转换的是父类应用指向了自己的子类对象时,该引用可以被提升,也可以被强制转换。 ...

    小二三不乌
  • Mysql 5.7 的重要特性

    这几天在熟悉 Mysql 的新版本 5.7,发现这个版本的改进真的很大,例如提供了更强大的 GIS 功能、高性能的 JSON 数据操作、对多处地方的性能提升 …...

    dys
  • 比特币浅析

    与比特币首次结缘大概是 2013 年我结束创业,回到 Juniper 时。有阵子,饭桌上我的同事东哥经常会眉飞色舞地谈起很多关于比特币和中本聪的轶事,还有他做量...

    tyrchen

扫码关注云+社区

领取腾讯云代金券