给原生table标签中的td设置省略号显示无效果

转载

mob604756eff415 2021-08-24 21:31:00

话不多说，先直接上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      td {
        width: 33%;
        height: 100px;
        line-height: 100px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <table border="1" cellspacing="0" width="100%">
      <tr>
        <td>
          阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大
        </td>
        <td>阿达大</td>
        <td>阿达大</td>
      </tr>
      <tr>
        <td>阿达大</td>
        <td>阿达大</td>
        <td>阿达大</td>
      </tr>
      <tr>
        <td>阿达大</td>
        <td>阿达大</td>
        <td>阿达大</td>
      </tr>
    </table>
  </body>
</html>

这里是效果

Document

阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大	阿达大	阿达大
阿达大	阿达大	阿达大
阿达大	阿达大	阿达大

可以看到，它并没有展示出我们想要看到的效果。而且文字最多的那一列的宽度比其他列更大。一般这个时候就应该区问问百度了。通过查阅资料，可以看到table有table-layout这个属性我们来看看它的解释

给原生table标签中的td设置省略号显示无效果_解决方法

可以看到 table-layout 的默认属性是 automatic，列宽度由内容决定。而我设置了

white-space: nowrap;

所以td的宽度被撑开了，从而导致我们设置的 text-overflow: ellipsis; 无效。

所以解决方法很简单，给table设置 table-layout: fixed;就可以了。

我们来看看效果

给原生table标签中的td设置省略号显示无效果_百度_02

OK!完美解决！

下面是完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        table-layout: fixed;
      }
      td {
        width: 33%;
        height: 100px;
        line-height: 100px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <table border="1" cellspacing="0" width="100%">
      <tr>
        <td>
          阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大阿达大
        </td>
        <td>阿达大</td>
        <td>阿达大</td>
      </tr>
      <tr>
        <td>阿达大</td>
        <td>阿达大</td>
        <td>阿达大</td>
      </tr>
      <tr>
        <td>阿达大</td>
        <td>阿达大</td>
        <td>阿达大</td>
      </tr>
    </table>
  </body>
</html>