样式 table 鼠标悬停省略处 显示全部文本

本文详细解释了CSS中table元素的table-layout:fixed属性的应用,以及td元素如何通过position,width,overflow等属性实现文本在固定宽度下的自适应展示,同时介绍了:hover状态下的文本处理技巧。

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

  table {
        table-layout: fixed; /* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
    }

        table td {
            position: relative;
            /*width: 80px;*/
            height: 20px;
            text-align: center;
            font-weight: normal;
            width: 100%;
            word-break: keep-all; /* 不换行 */
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
        }
         

            table td:hover {
                overflow: visible; /* 显示 */
                white-space: normal; /* 允许文字自动换行 */
                word-wrap: break-word; /* 文字自动换行 */
            }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值