html中表格内容超出后如何隐藏?_html表格内容超出隐藏-CSDN博客

本文链接：https://blog.csdn.net/weixin_42835515/article/details/83116598

html中表格内容超出后如何隐藏?

超出表格长度的文字会用省略号代替
在这里插入图片描述

  table{
   width: 300px;
   /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
   table-layout:fixed;
  }
  td{
   border: 1px solid black;
   /*超出部分隐藏*/
   overflow: hidden;
   /* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。不换行 */
   word-break: keep-all;
   /* 内容超出宽度时隐藏超出部分的内容 */
   white-space:nowrap;
   /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
   text-overflow:ellipsis
  }

#示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            border: 1px solid black;
            width: 300px;
            /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
            table-layout:fixed;
        }
        td{
            border: 1px solid black;
            /*超出部分隐藏*/
            overflow: hidden;
            /* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。不换行 */
            word-break: keep-all;
            /* 内容超出宽度时隐藏超出部分的内容 */
            white-space:nowrap;
            /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
            text-overflow:ellipsis
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td width="50">第一行第一列</td>
            <td width="100">第一行第二列</td width="100">
            <td width="150">第一行第三列</td width="150">
        </tr>
        <tr>
            <td>第二行1</td>
            <td>第二行2</td>
            <td>第二行3</td>
        </tr>
        <tr>
            <td>3，1</td>
            <td>3，2</td>
            <td>3，3文字比较多会这么样呢？</td>
        </tr>
    </table>
</body>
</html>