首頁 > 文章 > web前端 > css如何設定td溢出隱藏

css如何設定td溢出隱藏

醉折花枝作酒筹原創: 2021-04-21 18:06:074030瀏覽

方法：首先使用「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;一起使用*/
    }

全部程式碼：

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

效果截圖：

css如何設定td溢出隱藏

#推薦學習： css影片教學

以上是css如何設定td溢出隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 break overflow td word

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css如何設定縮放下一篇：css如何設定縮放

看更多