注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

北漂的小羊

Java编程,开发者,程序员,软件开发,编程,代码。新浪微博号:IT国子监

 
 
 

日志

 
 
关于我

在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号: IT国子监(http://weibo.com/itguozijian)

网易考拉推荐

控制HTML表格内容在超出长度后不换行,而是显示出省略号  

2011-05-14 18:14:10|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
新浪微博:IT国子监(记得关注噢) http://weibo.com/itguozijian

在开发的过程中,有时为了排版需要,当表格中的内容超过本单元格的长度时需要让超出的部分不折行显示,并且显示出省略号来。

网上有示例是用JS去计算并截取,然后组合上省略号的做法,但实际用起来比较繁锁,并且JS计算时还会遇到汉字和字符混合到一块时造成计算不准确的问题。

现查找相关资料并总结得出以下做法可以很好的实现。如下:

<table style="table-layout:fixed;font-size:12px;" width="300">

<tr>

<td nowrap style="overflow:hidden;text-overflow:ellipsis;">[2010-01-01]这是一个名字叫<a href="http://iteye.blog.163.com">天涯草博客</a>的列表项目。他难道不是很可爱吗?</td>

</tr>

<td nowrap style="overflow:hidden;text-overflow:ellipsis;">[2010-01-01]这是一个名字叫<a href="http://iteye.blog.163.com">天涯草博客</a>的列表项目。他难道不是很可爱吗?</td>

</tr>

</table>

对以上关键点的解释:

1.      table中的table-layout:fixed;是指固定表格的宽度,不让表格被内容撑开。

2.      TD中的nowrap是强制不让内容换行,对纯英文字符有效。

3.       TD中的overflow:hidden;具体意思是隐藏溢出也就是超出的部分不显示。

4.      TD中的text-overflow:ellipsis; 当对象内文本溢出时显示省略标记(...)

效果示例:

控制HTML表格内容在超出长度后不换行,而是显示出省略号 - 天涯草 - 天涯草
 

注意事项:

以上功能不支持FIREFOX,运行IE和GOOGLE。基于其它浏览器,未测试。

新浪微博:IT国子监(记得关注噢) http://weibo.com/itguozijian
  评论这张
 
阅读(1288)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016