文本溢出展示省略号的需求经常都会用到,而对于新式的浏览器,这完全不是问题,因为css3里面已经有实现text-overflow:ellipsis,但是最新w3c文档中却移除了这个属性,即使这样,也有不少浏览器实现了这个特性。其浏览器支持情况如下:
IE Firefox Opera Safari Chrome
6+ - 11.0+ 3.0+ 1.0+
可以看到,只有firefox和opera11一下的版本不支持这个浏览器,以此也可以放心大胆的用了。但是遇到要求高的产品经理时(╮(╯_╰)╭),就不得不考虑firefox等不支持的浏览器了,唯有使用js进行字符截断。
比较简单的截断方式就是按字符个数截断,以一个中文宽度等于两个英文宽度为前提,根据给定字符个数进行截取。但是字符在页面显示的时候,其宽度并不是一定的,会根据不同的字体和字体大小的不同而不同,更何况字母i和A的宽度是不一样的,存在bug且不够精确。
这里使用一种方法,通过给需要截取字符的节点附加一个兄弟节点(使用同样的class和style),通过计算各个字符在这个兄弟节点里面所占的宽度来限制字符个数。
代码如下:
双击选中源代码
var ellipsis = function(element){
var limitWidth = element.clientWidth;
var ellipsisText = '…';
var temp = element.cloneNode(true);
temp.id = 'checkTextLengthNode';
temp.className = 'check-text-length-node';
element.parentNode.appendChild(temp);
var realWidth = temp.clientWidth;
if(realWidth <= limitWidth){
return;
}
temp.innerHTML = ellipsisText;
var elliWidth = temp.clientWidth;
var str = element.innerHTML;
str = str.replace(/\s+/g, ' ');
var s, totalWidth = 0;
for(var i = 0, len = str.length; i < len; i++){
s = str.charAt(i);
temp.innerHTML = (s === ' ' ? ' ' : s);
totalWidth += temp.clientWidth ;
if(totalWidth + elliWidth > limitWidth){
str = str.substr(0, i);
break;
}
}
element.innerHTML = str + ellipsisText;
temp.parentNode.removeChild(temp);
}
处理字符的时候需要注意的两个个地方就是:
在页面中连续的空格是会被当成一个空格处理的,因此要把连续的空格合并成一个;
直接给innerHTML赋值空格’ ‘,其是不会占宽度的,因此要转换成html的空格表示。
通过不断添加新字符并监测添加后的宽度,就可以做到自适应不同的字体和字体大小了。具体例子点击这里查看,这个demo对text-overflow的支持进行了检测,如果支持ellipsis,就直接使用css的,毕竟js计算能省一点是一点。检测css属性及其支持情况可以查看这篇文章。
http://www.alloyteam.com/2011/10/js-text-overflow/
分享到:
相关推荐
实现方法:效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。实现方法:效果如图:适用范围:该方法适用范围广,但文字未
CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
碰到一个实现溢出文本显示省略号的需求,使用js截取字符串然后判断字符串长度实现,不过相对比较繁琐,本文为大家介绍下使用 text-overflow: ellipsis 实现溢出文本省略号显示
多行文本溢出显示省略号
jQuery文字溢出显示省略号插件是一款基于dotdotdot.js插件实现的单行多行文本溢出显示省略号
在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基于高度?这些问题之下,...
引导省略号为溢出文本添加省略号的快速方法版本 1.0.0 这个插件基于 [dobiatowski] ( ) 的这个项目。 请参阅的性能演示。 ####Dependencies: [jQuery] ( ) 如果你想使用工具提示,那么也 [twitter-bootstrap] ( ) #...
主要介绍了css实现文本溢出显示省略号的方法和示例分享,推荐给大家。
可以兼容火狐的溢出变省略号可以兼容火狐的溢出变省略号可以兼容火狐的溢出变省略号可以兼容火狐的溢出变省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览
dotdotdot.js插件是一款基于jQuery实现的单行多行文本文字内容超出溢出部分显示省略号的代码。
文件为jquery简单封装方法,需要先引入jquery,调用方法: $(function(){ $('.test').wordLimit(30) })
今天小编就为大家分享一篇Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
firefox下溢出部分省略号显示
...
...
datagrid添加tooltip及超出宽度添加省略号