在没有宽度的表格单元格内添加省略号答案

【问题标题】：Adding ellipsis inside table cell without widths在没有宽度的表格单元格内添加省略号
【发布时间】：2017-01-17 01:38:37
【问题描述】：

我想省略第二列中的文本，而不对两列中的任何一列的宽度进行硬编码。这可能在只有父元素（表格）具有固定宽度的情况下吗？

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;
}

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

【问题讨论】：

我相信答案是否定的，使用纯 CSS。您可以通过table 元素上的table-layout: fixed 和overflow: hidden 接近：jsfiddle.net/vpqg4v0n
如果你对 JS/jQuery 持开放态度，我在这里发布了一些选项：stackoverflow.com/a/33061059/3597276
谢谢，看看dotdotdot.frebsite.nl
只是想知道这个问题是否仍然悬而未决，因为尚未接受答案？

标签： html css html-table ellipsis

【解决方案1】：

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

jsFiddle

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;
}

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

【讨论】：

非常优雅。它也适用于没有width: 200px; 的流体宽度表

【解决方案2】：

你需要table-layout: fixed;

省略号部分的 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>

【讨论】：