菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
366
0

css如何设置td溢出隐藏

原创
05/13 14:22
阅读数 752192

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

本教程操作环境: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;一起使用*/
    }

全部代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" 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>

效果截图:

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

推荐学习:css视频教程

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

发表评论

0/200
366 点赞
0 评论
收藏
为你推荐 换一批