How to set td overflow hiding in css-CSS Tutorial-php.cn

How to set td overflow hiding in css

醉折花枝作酒筹

Release： 2023-01-05 16:10:30

Original

4093 people have browsed it

Method: First use the "word-break:keep-all" statement to set no line wrapping; then use the "overflow:hidden" statement to set the hidden part; finally use the "text-overflow:ellipsis" statement to set the overflow display Ellipsis.

How to set td overflow hiding in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

td overflow hiding

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;一起使用*/
    }

Copy after login

All codes:

<!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>

Copy after login

Effect screenshots:

How to set td overflow hiding in css

Recommended learning: css video tutorial

The above is the detailed content of How to set td overflow hiding in css. For more information, please follow other related articles on the PHP Chinese website!