CSS完成table td汉语字的省略与显示信息(适配IE与

日期:2021-03-10 类型:科技新闻 

关键词:培训互动游戏h5,微信群互动大转盘,h5安全互动游戏,报名抽奖能互动的,微信互动游戏摇一摇

所谓省略便是把过剩的字以“...”显示信息出来,而显示信息则是当电脑鼠标挪动到td上时,把省略的字再次显示信息出来。针对1个table,适配IE与FF、Chrome的省略方法CSS写法:

拷贝编码
编码以下:

table{
width:200px;
table-layout: fixed;
}
.autocut{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
.autocut:hover
{
overflow:visible;
white-space:normal;
word-wrap: break-word;
}

应用时,把autocut赋给td的clss类,便可:

拷贝编码
编码以下:

<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column1</td>
<td class="autocut">
全自动裁剪吧!全自动裁剪吧!
</td>
</tr>
</tbody>
</table>

非常必须留意的是,在HTML文档1定要再加这句申明:

拷贝编码
编码以下:

<!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来解决恶性事件),实际效果图:
上一篇:汇研微生物 返回下一篇:没有了