超出容器部分文字做省略,这是基本写前端代码都会遇到的问题。
某些位置为了表现完美不额外加滚动条,都会要求多出的部分作省略,例如文章简介”今天天气真的好…”,文本之后部分点击进入详情页才能看到,超出多余的用”…”省略。
然而,一般这些简介都是用后台语言去作处理,例如只显示前140字等,如何用前端代码实现?
你会想到用css的overflow:hidden;white-space:nowrap;text-overflow:ellipsis实现省略,然而这只能省略一行的文字,如果多行文字则失效,应该如何解决?
在新版的chrome中有一个属性-webkit-line-camp属性,它允许你指定特定行数省略。
例如:3行后省略
1 |
text- overflow :ellipsis;
|
7 |
-webkit-box-orient:vertical; |
另外,在opera中也有相关的支持属性text-overflow:-o-ellipsis-lastline,他能识别超出容器的最后一行作省略,然而明显地,chrome的做法更优雅,更灵活。
可是,以上都是个别浏览器的实现,想要各种浏览器(包括IE哥哥)都用上,怎么办?
于是我就写了这个东西:mlellipsis.js
先猛戳我这个简陋的demo,调用方法其实很简单:
其中,5是行数,也就是和chrome的-webkit-line-clamp实现方式一样,指定特定行数显示;
若用jquery的朋友,可以在获取元素后把它转化为js的dom对象。
例如:
1 |
var node = $( ".demo > [" )[0];
|
具体做法如下:
1 获取该调用node结点的文字大小、行高、文本的高度;
2 根据行高*想要省略的行数row,判断文本的高度是否大于需要省略的高度,如果大于则不需要隐藏(例如字数一行就能显示,那么输入row=2也只会显示一行);
3 因为会省略文字,所以先把完整文字内容写入标签的title属性,hover后可以查看全部原文本;
4 动态截断文本后面的文字,并加上”…”,直到截断后的文字高度和目标的高度一样,则不拦截;
逐步分析:
1.获取计算后属性
首先获取node节点的三个值会涉及到浏览器的兼容性,例如一般现代浏览器可用新属性getComputedStyle获取计算后的css属性,而可爱的IE6-8不支持这个属性,需要用this.currentStyle。
「ps:具体差别可点击这里参看zxx对getComputedStyle介绍的文章」
其实如果用jquery的话可以直接调用css()方法获取,然而懒得加载jquery,因此我重写了一次。
01 |
Element.prototype.getFinalStyle= function (property){
|
03 |
if (window.getComputedStyle){
|
04 |
s = window.getComputedStyle( this ,
null )[property];
|
07 |
s = this .currentStyle.property;
|
09 |
return s.substring(0,s.length-2);
|
因此,获取元素属性的就很简单了:
2 |
var
fontSize = this .getFinalStyle( "fontSize" );
|
3 |
var
lineHeight = this .getFinalStyle( "lineHeight" );
|
4 |
var
height = this .getFinalStyle( "height" );
|
注意了,我重写的这个只为了适这个js,因此其他的属性可能不支持,例如没有px或者单位不为px的属性值。
//路人甲:把s.substring()不写进去就行了嘛,那就可以兼容了
//tq:我就是懒……
然而,这里我还发现了一个问题,就是line-height值,一般如果不设置line-height会是什么值?1.5么?
非也,会是获得”normal”的一个string类型,我再找了一下资料{资料1,资料2}发现normal是个神奇的数值,不同浏览器、不同字体、不同系统都会有各自的解析!
//tq:omg…那怎么办
是的,我们要获取正确的高度,就一定要获得精确地line-height值。因此我看了各个line-height的大致比例,我决定把它reset掉,就是如果line-height为normal,则我把line-height设为1.5,即1.5倍的font-size;
2.获取内容文本
无独有偶,获取文本的时候也会遇到浏览器兼容的问题,除了firefox外,其他浏览器都能支持innerText属性,因此直接调用this.innerText木有问题,然而ff的innerText却为undefined,但它却用textContent可以实现相同效果。具体差别点击这里。
你懂的,我继续重写:
1 |
Element.prototype.getText= function (){
|
2 |
if ( this .innerText){ return
this .innerText;}
|
3 |
else { return
this .textContent;}
|
6 |
Element.prototype.setText= function (str){
|
7 |
if ( this .innerText!= "" ){ this .innerText=str|| "" ;}
|
8 |
else { this .textContent=str|| "" ;}
|
调用方法就简单地this.getText()即可或者this.setText(“str”)改变其值
3.设置title值
这个很简单
1 |
var str =
this .getText();
|
2 |
this .setAttribute( "title" ,str);
|
4.关键步骤:动态截取文本
这里用了正则,匹配当文本高度小于目标高度(省略行数x行高=元素省略时该显示的目标高度)时,不断截取后面的文本,并加上”…”省略号。
02 |
while (dheight< this .clientHeight){
|
04 |
this .setText(str.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..." ));
|
5.简单剪枝
看似结束了,但是如果文本有8000+,但是只需要显示前几行,则只显示100+字呢?
那会由于需要不断截取字符,循环会疯掉。用chrome的调试行数console.time()和console.endTime()测试后发现,如果不优化直接上的话8800字需要17s!
然而这里只需要简单剪枝,就可以保持无论多少文字都几十ms的水平了。
剪枝思考:初步打算用二分法,就是当文本高度大于目标高度2倍,则截断一半文字。然而,再考虑到文本里分为三种:中文字、英文字、字符;一般来说,中文字=2英文字=2字符。因此最坏情况可能前面一半字符全部是英文,后面一半文本全部是中文,这样二分法就会截取到25%的高度,因此考虑到最坏情况,需要3倍才截断。
1 |
while (dheight*3< this .getFinalStyle( "height" )){
|
2 |
this .setText(str.substring(0,str.length/2));
|
这里剪枝还可以大大优化,欢迎提出宝贵意见~*_*
以上,兼容到IE8+,chrome,firefox,safari,opera。
IE7以下不支持element.prototype的原型链扩展,果断鄙视之。
下载:
mlellipsis.js(完整版带注释:1.70k)
mlellipsis.min.js(压缩版:1.06k)
出处targetkiller
原文点此 http://targetkiller.net/mutiple-line-ellipsis/
分享到:
相关推荐
CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接...
Ellipsis.js Ellipsis.js是一个纯Javascript库,用于在一些复杂的DOM元素(例如多行div或带有子元素(链接,跨度等)的元素)上添加省略号。 该库是完全响应式的,可在所有主要版本上使用。Ellipsis.js Ellipsis.js...
CSS实现多行文字显示省略号效果.zip
jQuery文字溢出显示省略号插件是一款基于dotdotdot.js插件实现的单行多行文本溢出显示省略号
实现方法:效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。实现方法:效果如图:适用范围:该方法适用范围广,但文字未
多行文本溢出显示省略号
主要介绍了微信小程序实现多行文字 超出部分省略号显示功能,比如设置只显示2行,超出部分省略号显示,本文通过实例代码给大家介绍,需要的朋友可以参考下
多行省略 Clamp.js 下载
React线省略号 React.JS的穷人多行省略号组件 安装 要安装稳定版本: npm install --save react-lines-ellipsis 用法 import LinesEllipsis from 'react-lines-ellipsis' ...
dotdotdot.js插件是一款基于jQuery实现的单行多行文本文字内容超出溢出部分显示省略号的代码。
linux mysql客户端,远程连接mysql
Ellipsis.js - 纯Javascript库来处理多行省略号
传递的参数是具有以下属性的对象文字: maxLine - 要修剪的行数trigger - 应触发callback的省略号锚点上的事件,如果省略,省略号将添加为纯文本callback - trigger事件时callback函数,如果省略,则显示带有完整...
单行文本与多行文本溢出时显示省略号的CSS设置
...
...
Borland C++ Builder 6 Quick Start 帮助文档 (英文,PDF) Chapter 1 Introduction 1-1 What is C++Builder? ...1-1 Registering C++Builder ...1-2 Finding information ...1-3 .........(以下省略)
多格式多行文字显示省略号插件,总共有两种方法,一个是直接用jq写的简单代码。另一个是jq的插件,支持多种显示省略号的方式,例如在省略号后面加“查看详情”等,为了明显效果,把overflow注释了,在IE6下查看的话...