Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

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

Dawnzhang 2019-01-28 11:31:00 阅读数:259 评论数:0 点赞数:0 收藏数:0

前言

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

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

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-line-clamp: 4; 
overflow: hidden;
}

效果如下:

局限性:

使用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;
/*可加可不加,就是在省略号之前加模糊,效果图为没加*/
 background: -webkit-linear-gradient(left, transparent, #fff 55%);
 background: -o-linear-gradient(right, transparent, #fff 55%);
 background: -moz-linear-gradient(right, transparent, #fff 55%);
 background: linear-gradient(to right, transparent, #fff 55%);
}

效果:

原理:

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

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

 

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代码,获取元素的clientHeightscrollHeight,当clientHeight < scrollHeight时,发生了溢出,
 let clientHeight = document.getElementById('aboutUs-content').clientHeight 
let scrollHeight
= document.getElementById('aboutUs-content').scrollHeight
console.log(clientHeight)
console.log(scrollHeight)

if (clientHeight < scrollHeight) {
console.log(
'发生了文字溢出')
/*我们可以在这里,为元素后面添加省略号,或者用vue项目的v-if显示出省略号*/
}

方法二,使用插件

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的方法。兼容多浏览器。

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

欢迎大家关注公众号,不定时干货,只做有价值的输出

 作者:Dawnzhang 
出处:https://www.cnblogs.com/clwydjgs/p/10311768.html 
版权:本文版权归作者
转载:欢迎转载,但未经作者同意,必须保留此段声明;

 

版权声明
本文为[Dawnzhang]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/clwydjgs/p/10311768.html

支付宝红包,每日可领(支付宝免费1-2元支付红包)