table里面td文字过多的处理

最新推荐文章于 2022-08-14 20:55:56 发布

一路追求匠人精神

最新推荐文章于 2022-08-14 20:55:56 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_36566924/article/details/99749810

前端专栏收录该内容

115 篇文章

订阅专栏

本文介绍了一种使用CSS技巧优雅处理表格中溢出文本的方法，通过设置特定的CSS样式，可以让表格在不破坏布局的情况下，仅在鼠标悬停时显示完整的文本内容，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table td {
    height: 25px;
    line-height: 25px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

table td:hover { /* 鼠标滑过  显示隐藏的内容  伴有横向的滚动条 */
    overflow: auto;
    text-overflow: clip;
}

效果：table中文字进行了隐藏，当鼠标移动上去的时候，有滑动条可以拉动数据