文档章节

截取长文本,显示省略号(text-overflow:ellipsis)

开源oschina
 开源oschina
发布于 2015/01/14 09:57
字数 1116
阅读 65
收藏 5

今天做项目有这么个需求(截取过长的文本内容,显示成省略号形式)于是想到了text-overflow:ellipsis,但记忆中好像这个有兼容性问题,就带着疑惑查阅了些资料,但发现资料都是一两年前的,都说有兼容性问题,貌似符合当年的记忆。心想不好,难道又要依靠js吗,这多多少少会损耗掉一些性能啊,带着疑虑和不甘自己来验证一番,毕竟过了几年了,这个css3的属性难道现代浏览器还不全支持吗?万恶的ie都一直支持的,这太不符合规律了。于是经过一系列验证,我得出text-overflow:ellipsis如今各大浏览器已完美支持如有错误还请指出

截取过长的文本内容,显示成省略号需要text-overflow:ellipsis加上一系列其他属性才能实现,下面分情况来说明:

1.div p li等块元素中如果全是数字则只需要text-overflow:ellipsis配上width和overflow:hidden就能实现...

example:

<div style=" width:50px; text-overflow:ellipsis; overflow:hidden;">1111111111111111111111111111111111</div>

2.div p li等块元素中如果全是英文则只需要text-overflow:ellipsis配上width和overflow:hidden就能实现...

example:

 

<div style=" width:50px; text-overflow:ellipsis; overflow:hidden;">babybabybabybabybabybabybabybabybabybabybabybaby</div>

 

3.div p li等块元素中如果全是中文则需要text-overflow:ellipsis配上width和overflow:hidden white-space:nowrap才能实现...

 

example:

 

<div style=" width:50px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">我爱宝贝莹我爱宝贝莹我爱宝贝莹我爱宝贝莹我爱宝贝莹</div>

 

当然英文和数字混排和1、2种情况一样

如果是table,td里想实现这种效果也分几种情况,必要条件就是table得设table-layout:fixed

4.td直接包含中文,那table还必须有width,td需要text-overflow:ellipsis配上overflow:hidden white-space:nowrap

example:

<table style="table-layout:fixed" width="120"> <tr><td style=" text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">我爱宝贝莹我爱宝贝莹我爱宝贝莹我爱宝贝莹我爱宝贝莹</td></tr> </table>

5.td包含数字或英文或数字英文混排,那table也还必须有width,td需要text-overflow:ellipsis和overflow:hidden

example:

 

<table style="table-layout:fixed" width="50"> <tr><td style=" text-overflow:ellipsis; overflow:hidden;">11111111111111111111111111111</td></tr> </table>

 

6.td里嵌套div p li等块状元素,则table不需要width和table-layout:fixed,但块状元素得有width,剩余的中文、数字、英文情况就和1、2、3相同了

example:

复制代码
<table> <tr><td><div style=" width:50px; text-overflow:ellipsis; overflow:hidden;">11111111111111111111111111111</div></td></tr> </table> <table> <tr><td><div style=" width:50px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">我爱宝贝莹我爱宝贝莹我爱宝贝莹我爱宝贝莹我爱宝贝莹</div></td></tr> </table>
复制代码

7.中英文或者中文数字混排则和3、4情况相同

最后送上一段对以上依然不确定的同学一段jquery代码(同样可以实现相同功能)

复制代码
//页面加载之后,设置.样式.  $(function(){ //使用id选择器;例如:tab对象->tr->td对象. //$("#high_light").find("tr").find("td")性能优于$("#high_light tr td")  $("#high_light").find("tr").find("td").each(function(i){ //获取td当前对象的文本,如果长度大于25;  if($(this).text().length>25){ //给td设置title属性,并且设置td的完整值.给title属性.  $(this).attr("title",$(this).text()); //获取td的值,进行截取。赋值给text变量保存.  var text=$(this).text().substring(0,25)+"..."; //重新为td赋值;  $(this).text(text);  
         }  
      });  
}); 
复制代码
复制代码
<table id="high_light"> <tr> <td> 这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取. </td> <td> 这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取. </td> <td> 这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取. </td> </tr> </table>
复制代码

本文转载自:http://www.cnblogs.com/web-lexi/p/3574609.html

开源oschina

开源oschina

粉丝 41
博文 56
码字总数 22357
作品 0
九龙坡
私信 提问
CSS截取字符串显示省略号

有时候,为了避免页面中某个Div的内容过多,而导致页面变形,我们通常在CSs中定义overflow:hidden,这样会不显示文字,不过看上去 用户体验不太好,为了获得最佳的用户体验,我们在隐藏文字的...

名字已被取
2016/03/02
28
0
CSS 多行文本换行,溢出部分省略号

//但行文本省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //多行文本省略号 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line......

Jack088
2015/10/19
514
0
css3文本溢出显示控制

1.单行文本溢出显示省略号(…) 设置元素为块级元素display:block,设置元素宽度width,设置overflow:hidden,设置文本溢出显示状态text-overflow:ellipsis; white-space是否在容器边界换行,n...

w-rain
2016/01/08
194
0
css中text-overflow:ellipsis文本溢出产生省略号

text-overflow : clip | ellipsis 参数:   clip :  不显示省略标记(...),而是简单的裁切 (PS:clip这个参数是不常用的!)   ellipsis :  当对象内文本溢出时显示省略标记(...)...

Reya滴水心
2015/08/12
0
0
CSS控制文字只显示一行,超出部分显示省略号

之前使用过这个例子,现在总结说明一下: 先给贴代码: <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> </p> 测试浏览器: IE6/7/8/9、opera12.0......

曾沙
2012/10/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

typescript 接口 函数类型 可索引类型

函数类型 可索引类型 数字索引签名 字符串索引签名 数字索引签名返回值 必须是 字符串索引签名返回值的子集 只读索引签名

lilugirl
今天
3
0
Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部