CSS实现table td中文字的省略与显示
来源:互联网 发布:无锡经信委 软件产值 编辑:程序博客网 时间:2024/05/16 04:20
所谓省略就是把多余的字以“...”显示出来,而显示则是当鼠标移动到td上时,把省略的字重新显示出来。对于一个table,兼容IE与FF、Chrome的省略方式CSS写法:
1 table{ 2 width:200px; 3 table-layout: fixed; 4 } 5 .autocut{ 6 overflow:hidden; 7 white-space:nowrap; 8 text-overflow:ellipsis; 9 -o-text-overflow:ellipsis;10 -icab-text-overflow: ellipsis;11 -khtml-text-overflow: ellipsis;12 -moz-text-overflow: ellipsis;13 -webkit-text-overflow: ellipsis;14 }15 .autocut:hover16 {17 overflow:visible;18 white-space:normal;19 word-wrap: break-word;20 }
使用时,把autocut赋给td的clss类,即可:
1 <table> 2 <thead> 3 <tr> 4 <th>Column1</th> 5 <th>Column2</th> 6 </tr> 7 </thead> 8 <tbody> 9 <tr> 10 <td>Column1</td> 11 <td class="autocut">12 自动剪裁吧!自动剪裁吧!13 </td> 14 </tr>15 </tbody>16 </table>
特别需要注意的是,在HTML文件一定要加上这句声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
否则IE就不起作用啦,当然,由于IE6对hover的支持只到a标签,所以IE6就不能这样通过css来显示了(可以给td内部加上a标签,然后设置其css,或者通过js来处理事件),效果图:
转载请注明原址:http://www.cnblogs.com/lekko/archive/2013/04/30/3051638.html
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- CSS实现table td中文字的省略与显示
- CSS实现table td中文字的省略与显示
- table的td中实现内容省略
- table中td与td显示细线
- css中td截断多余的文字,不显示多余的和table-layout的fixed属性
- 用css解决table文字溢出控制td显示字数
- 用css解决table文字溢出控制td显示字数
- 用css解决table文字溢出控制td显示字数
- 用css解决table文字溢出控制td显示字数
- TextView中文字的省略显示
- 数据显示列表 Table中 td 某列字段缩短省略
- css实现table中td单元格鼠标悬浮时显示更多内容
- css 同行文字超长显示省略标记
- css table td 文字过长隐藏
- table td 文字超出显示省略号
- table td 文字超出显示省略号
- HTML:table中的td文字隐藏并实现hover显示全部文字
- table td中过长用省略号代替【css实现】
- hibernate悲观锁与乐观锁的使用
- Debian misc
- Artificial Intelligence: Foundations of Computational Agents--英文原版
- [转载]Android中AndroidManifest.xml详解
- 区分关联、依赖和聚集关系
- CSS实现table td中文字的省略与显示
- 如何打开选中的层或独立表的属性窗口【AO&AE开发】
- IOS-基于xcode4的iOS framework 制作教程
- Java中的==和equals区别
- PHP 交换数组键值 工作日记
- haffmanTree(哈夫曼树)的相关操作 + 两种遍历哈弗曼算法+ 无递归遍历+ 叶子节点遍历
- vexcl初探
- android中实现
- day7 test05