省略号在表格单元格中不起作用

Question

>我有表格，其中省略号应应用于第一个单元格(第一个单元格应填充剩余空间(，但表格位于父div 之外。我怎样才能让它工作？

.wrapper {
  width:200px;
  background: wheat;
}
.el-cell {
  width:99%;
  display: block;
}
.table {
  width: 100%;
}
.no-wrap {
  white-space: nowrap;
}
.el {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="wrapper">
  <table class="table">
    <tr>
      <td class="el-cell">
        <div class="el">
          <span>first cell should ellipsis aaaaaaa bbbb ccccccc</span>
        </div>
      </td>
      <td>
        <span class="no-wrap">2nd cell</span>
      </td>
    </tr>
  </table>
</div>

Answer 1

将

position: relative添加到.el-cell，并将position: absolute添加到具有属性top: 0和left: 0的span

.wrapper {
  width:200px;
  background: wheat;
}
.el-cell {
  width:99%;
  position: relative;
}
.el span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="wrapper">
  <table class="table">
    <tr>
      <td class="el-cell">
        <div class="el">
          <span>first cell should ellipsis aaaaaaa bbbb ccccccc</span>
        </div>
      </td>
      <td>
        <span class="no-wrap">2nd cell</span>
      </td>
    </tr>
  </table>
</div>

Answer 2

只需添加table-layout: fixed .