根据屏幕宽度在表格内换行

Question

考虑到屏幕宽度调整大小，我想在表格中包含单行文本。该表格占据了 100% 的屏幕宽度，一旦调整窗口大小，我只想将文本换成一行（如果超出内容宽度，则用省略号换行）。我只能在以像素为单位指定固定宽度时实现文本换行。 JSFiddle：https://jsfiddle.net/4vo7p58c/5

问题是在td 元素上没有固定的width，它不会换行，一旦我水平调整窗口大小，行会分成两行而不是换行以适应屏幕宽度

Answer 1

你的代码就快到了，

td 默认是table-cell 元素，通常不同于inline-block 或block。

如果你想使用 ellipsis 值，那么你应该有一个 td 的宽度，这将确保内容保持溢出，并为你的原因使用 display:block/inline-block;，它适用于两者。

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid red;
  table-layout: fixed;
}

th {
  text-align: left;
  border-bottom: 1pt solid #4C4C4C;
  border-right: 1pt solid #4C4C4C;
  padding: 8px;
  width: 20%;
}

td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  border: 1px solid #000000;
  word-wrap: break-word;
}

<div class="External">
  <table>
    <tr>
      <th>First Element</th>
      <td>Text</td>
    </tr>
    <tr>
      <th>Second Element</th>
      <td>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
    </tr>
    <tr>
      <th>Third Element</th>
      <td>Text</td>
    </tr>
    <tr>
      <th>Fourth Element</th>
      <td>Text</td>
    </tr>
  </table>
</div>