search

Home  >  Article  >  Web Front-end  >  How to set td overflow hiding in css

How to set td overflow hiding in css

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-21 18:06:074044browse

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

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>

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!

html5 css css3 break overflow td word
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to set zoom in cssNext article：How to set zoom in css

Related articles

See more