css如何设置td溢出隐藏

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

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

td 溢出隐藏

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

全部代码：

<!DOCTY PE  html> 
<html> 
<head> 
< ;m eta http-equiv="Content -t ype" content="text/html; charset=utf-8" /> 
<title>document</title> 
<style>
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;一起使用*/
    }
</style>
</head> 
<body>
    <table border="1">
        <tr>
            <td>19999</td>
            <td>19999</td>
        </tr>
        <tr>
            <td>19999</td>
            <td>19999</td>
        </tr>
        <tr>
            <td>19999</td>
            <td>19999</td>
        </tr>
    </table>
</body> 
</html>

效果截图：

推荐学习：css视频教程

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

总结

以上是为你收集整理的 css如何设置td溢出隐藏全部内容，希望文章能够帮你解决 css如何设置td溢出隐藏所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于css如何设置td溢出隐藏的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did199778

更新时间：2023-04-27 阅读：21次