Question

我想对第二列中的文本进行椭圆化处理，而不对两列中的任何一列进行硬编码。只有父元素（表）具有固定的宽度？

这是可能的吗？

＆＃13;

table {
  width: 100px;
  border: 1px solid green;
}

.td1 {
  border: 1px solid blue;
 }

.td2 {
  border: 1px solid red;
 }

.td div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

＆＃13;

<table>
  <tr>
    <td class="td1">Label:</td>
    <td class="td2"><div>thequickbrownfoxjumpsoverthelazydog</div></td>
  </tr>
</table>

＆＃13;

Answer 1

您可以在嵌套表中执行此操作，我使用CSS表作为示例，并在表格布局的div中添加span标记。

<强> jsFiddle

＆＃13;

table {
  width: 200px;
  border: 1px solid green;
}
.td1 {
  border: 1px solid blue;
}
.td2 {
  border: 1px solid red;
}
.td2 div {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.td2 span {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

＆＃13;

<table>
  <tr>
    <td class="td1">Label:</td>
    <td class="td2">
      <div><span>thequickbrownfoxjumpsoverthelazydog</span></div>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

您需要table-layout: fixed;

更多信息 - https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

省略号部分的CSS没问题，但是默认情况下，表会根据内容宽度计算其宽度，因此表格单元格与内容一样宽，文本永远不会崩溃了。 table-layout: fixed;改变了这一点。这意味着该表将在插入内容之前计算单元格的尺寸，然后内容在渲染时不会影响表格的尺寸。

权衡是您的表将不再自动平衡列：

table { width: 100px; border: 1px solid green; table-layout: fixed; } .td1 { border: 1px solid blue; } .td2 { border: 1px solid red; } td div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

<table> <tr> <td class="td1">Label:</td> <td class="td2"><div>thequickbrownfoxjumpsoverthelazydog</div></td> </tr> </table>

在没有宽度的表格单元格中添加省略号

2 个答案: