完美实现溢出文本省略
来源:互联网 发布:js判断div是否隐藏 编辑:程序博客网 时间:2024/06/05 10:21
文本溢出展示省略号的需求经常都会用到,而对于新式的浏览器,这完全不是问题,因为css3里面已经有实现text-overflow:ellipsis,但是最新w3c文档中却移除了这个属性,即使这样,也有不少浏览器实现了这个特性。其浏览器支持情况如下:
IEFirefoxOperaSafariChrome6+-11.0+3.0+1.0+
可以看到,只有firefox和opera11一下的版本不支持这个浏览器,以此也可以放心大胆的用了。但是遇到要求高的产品经理时(╮(╯_╰)╭),就不得不考虑firefox等不支持的浏览器了,唯有使用js进行字符截断。
比较简单的截断方式就是按字符个数截断,以一个中文宽度等于两个英文宽度为前提,根据给定字符个数进行截取。但是字符在页面显示的时候,其宽度并不是一定的,会根据不同的字体和字体大小的不同而不同,更何况字母i和A的宽度是不一样的,存在bug且不够精确。
这里使用一种方法,通过给需要截取字符的节点附加一个兄弟节点(使用同样的class和style),通过计算各个字符在这个兄弟节点里面所占的宽度来限制字符个数。
<span style="font-size:14px;">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);}</span>
处理字符的时候需要注意的两个个地方就是:
- 在页面中连续的空格是会被当成一个空格处理的,因此要把连续的空格合并成一个;
- 直接给innerHTML赋值空格’ ‘,其是不会占宽度的,因此要转换成html的空格表示。
通过不断添加新字符并监测添加后的宽度,就可以做到自适应不同的字体和字体大小了。具体例子点击这里查看,这个demo对text-overflow的支持进行了检测,如果支持ellipsis,就直接使用css的,毕竟js计算能省一点是一点。
0 0
- 完美实现溢出文本省略
- 溢出文本省略
- css省略溢出文本
- ellipsis文本溢出省略
- 文本溢出省略
- 不定高多行溢出文本省略
- 文本溢出省略显示效果
- [前端] 实现单行文本溢出和多行文本溢出省略
- 文本溢出显示省略标记'...'的bug
- 如何让文本溢出时显示省略标记“……”
- CSS学习笔记:溢出文本省略(text-overflow)
- css 文本溢出时显示省略标记(...)
- text-overflow:ellipsis溢出显示省略实现方法
- IE 文本溢出Css 实现
- 强制在一行内显示所有文本,不回行,对象内文本溢出时显示省略标记
- 纯css文本溢出省略(需定义宽度,兼容IE6、IE7、Firefox2.0、Opera9.0)
- 纯css文本溢出省略(兼容IE6+、FF2.0+、Opera9.26+、sefari)
- 《CSS3实战》笔记--溢出文本省略:text-overflow和文本换行显示:word-wrop
- 电子邮件收发原理和实现(POP3, SMTP) [整理]
- ByteArrayOutputStream和ByteArrayInputStream详解
- Android Touch事件的传递机制
- 内核启动yaffs2文件系统出现Partially written xxx block detected
- ubuntu 中如何查看正在运行的进程以及结束进程
- 完美实现溢出文本省略
- eclipse 更改编码utf-8
- POJ-2186-Popular Cows 解题报告
- mongo客户端mongo VUE增删改查
- Eclipse “this compilation unit is not on the build path of a java project”
- ios CocoaLumberjack——带颜色的Log
- Ubuntu 14.04中文输入法的安装
- Java IO流分析整理
- 数据库作业开发二