原创投稿
  1. 创想鸟首页
  2. 用户投稿

css如何设置td溢出隐藏

程序猿 • • 用户投稿

方法：首先使用“word-break:keep-all”语句设置不换行；然后使用“overflow:hidden”语句设置超出隐藏部分；最后使用“text-overflow:ellipsis”语句设置溢出显示省略号。

css如何设置td溢出隐藏

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

td溢出隐藏

table{        width:100px;        table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */    }    td{        width:100%;        word-break:keep-all;/* 不换行 */        white-space:nowrap;/* 不换行 */        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/    }

全部代码：

    document table{        width:100px;        table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */    }    td{        width:100%;        word-break:keep-all;/* 或是 white-space:nowrap;不换行 */        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/    }     
        
            19999            19999        
        
            19999            19999        
        
            19999            19999

效果截图：

立即学习“前端免费学习笔记（深入）”；

5D`D{2L854]X9C)FR)1Q8NH.png

推荐学习：css视频教程

以上就是css如何设置td溢出隐藏的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1619547.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
css如何实现元素不随滚动条滚动
上一篇 2025年12月24日 06:45:29
css如何设置缩放
下一篇 2025年12月24日 06:45:44

相关推荐

发表回复

登录后才能评论
关注微信