表格单元格上的垂直文本溢出

Question

   .table {
  table-layout: fixed;
  }
  .text-overflow {
  display:block;
  overflow-y: scroll;
  white-space: nowrap;
  text-overflow: ellipsis;
  }

  .cell-4 {
  width: 200px;
  }

https://codepen.io/mstone6769/pen/dodJEz

如何使表格单元格垂直溢出？我试着用溢出-y，但没有起作用

Answer 1

您必须允许文本在.text-overflow更新的css中包装

.text-overflow {
  display: block;
  height: 20px;
  overflow: auto;
}

Answer 2

用overflow: scroll。

​

.table {
  table-layout: fixed;
  width: 400px;
  /* Just for the example */
}

.text-overflow {
  display: block;
  overflow: scroll;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cell-4 {
  width: 200px;
}

<div class="container-fluid">
  <h1>Text overflow in a table cell</h1>
  <table class="table">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td class="cell-4">
          <span class="text-overflow">Ccell 4 is really really long and needs to wrap because it's so long</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

​