table中一行省略显示-优快云博客

本文展示了一种在HTML中实现table中一行内容省略显示的方法，通过设置CSS样式，包括table布局、文本溢出处理等，使得长文本在table单元格中不会完全展开，而是以省略号(...)的形式展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table格式的一行省略显示

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>table中一行省略显示</title>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
    <style type="text/css">
     table.grid_biserial{
        width:200px;/*如果table不是固定宽带，那么省略显示的td就需要固定宽度了。*/
        table-layout: fixed; /*fixed ： 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。 */
     }
    table.grid_biserial tr td {
        white-space:nowrap;/* 不换行 */
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
       /*display: inline-block;   *//*需与overflow:hidden;一起使用。*/
        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
        -o-text-overflow:ellipsis;  /*-o-就是以Presto为引擎的 Opera私有的*/
        -icab-text-overflow: ellipsis; /*-icab-是iCab私有的*/
        -khtml-text-overflow: ellipsis;  /* -khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）*/
        -moz-text-overflow: ellipsis;      /*-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）*/
        -webkit-text-overflow: ellipsis;    /* -webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）*/
        /**，-o-就是以Presto为引擎的 Opera私有的、-icab-是iCab私有的，-khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）、-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）、-webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。*/
    }
    </style>
</head>
<body>
<div>
    <table class="grid_biserial">
        <tr>
            <td>12345678901234567890</td>
            <td>2asdfasdfa2asdfasdfa</td>
        </tr>
        <tr>
            <td>1</td>
            <td>宣传v在df感到23反感速度</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
</div>
</body>
</html>

运行后结果如下：