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

Question

我有 table，其中应将省略号应用于第一个单元格（第一个单元格应填充剩余的 space），但 table 超出了父级 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

只需添加 table-layout: fixed.

Answer 2

将 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>

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

Ellipsis doesn't work in table cell

html

css

ellipsis