所谓省略就是把多余的字以“...”显示出来，而显示则是当鼠标移动到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:hover 16 { 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
相关推荐
所谓省略就是把多余的字以“…”显示出来，而显示则是当鼠标移动到td上时，把省略的字重新显示出来。对于一个table，兼容IE与FF、Chrome的省略方式CSS写法： 复制代码代码如下: table{ width:200px; table-layout: ...
CSS实现超长字段用省略号代替 td的属性中注意nowrap有效不能设置width，但是可以设置table的width
表格内容溢出省略号显示</title> <style type=text/css> .contain { font-family: ‘ Microsoft YaHei '; margin: 15px auto; width: 900px; } table { border: 1px solid #e3e6e8; border-...
效果如图 代码: ... table td{white-space:nowrap;overflow:hidden; text-overflow:ellipsis;} table {table-layout:fixed;} </style> 注意!给TD指定宽度(否则宽度自动分配,达不到理想的效果).
页面中table宽度设置width=600px之后，宽度仍然不是固定的，文字太长后不换行，把table都撑变形了。 解决办法： 1.table 设置 宽度，绝对宽度和相对都可以 table-layout:fixed ; 设置了这个属性，其余所有td都是...
代码如下： 复制代码代码如下: <table> <tr> <td> <div xss=removed> ’这里放置要显示的文本’> 这里放置要显示的文本 </nobr> </div> </td> </tr> </table> 效果如下：
在w3cschool中css3中有个文本相关的属性text-overflow，当把它设为ellipsis时文本溢出内容就能显示为省略标记，而设为clip时就能把文本溢出的部分裁切掉，当然，前提是设置好两个属性，那就是white-space:nowrap...
难难在实现同一个效果有很多方法，大家或许会疑惑。十天学会系列教程会清晰的写出各种方法，让大家能少一点坎坷。在ASP里面，大家几乎都是使用VB，数据库嘛，也无非是SQL和ACCESS。在ASP.NET里面，数据库还是这两个...
根据鼠标获得元素： document.elementFromPoint(event.x,event.y).tagName=="TD document.elementFromPoint(event.x,event.y).appendChild(ms) 窗体图片 document.images[索引] 窗体事件绑定 document....
JavaScript常用于实现如下功能： |--控制文档的外观和内容； |--对浏览器的控制； |--与 HTML 表单的交互； |--与用户的交互； |--执行计算等。 1.单击事件：定义在按钮的开始标签中 语法：onclick="js语句...