该文章介绍了一种CSS方法，用于处理表格单元格内内容过长的情况。通过设置`overflow:hidden`、`text-overflow:ellipsis`和`white-space:nowrap`，可以隐藏超出单元格宽度的内容。当鼠标悬停时，通过切换`overflow`属性和应用动画，使完整内容可见，确保可读性。
/*table 单元格内容长度超长隐藏，移入显示*/
.td_300 {
width: 300px;
height: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
.td_300:hover {
overflow: visible; // 内容不会被修剪，会呈现在元素框之外
animation: 3s siderbar linear infinite normal;
z-index: 10;
word-wrap:break-word;
word-break: break-all;
width: 300px;
}
<table>
<tr>
<td>编号</td>
<td>名称</td>
<td>长度</td>
</tr>
<tr>
<td><div class="box box5">编号编号编号编号编号编号编号编号编号编号编号编号编号编号编号编号编号编号编号编号编号编号编号编号</div></td>
<td><div class="box box5">名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称</div></td>
<td>长度</td>
</tr>
</table>
1637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
