根据屏幕宽度在 table 内换行

Question

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

问题是 td 元素上没有固定的 width，它不会换行文本，一旦我水平调整 window 的大小，该行就会分成两行换行而不是换行以适合屏幕宽度

Answer 1

你的代码快到了，

td is by default table-cell element which is typically different from inline-block or 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>

根据屏幕宽度在 table 内换行

Wrap text inside table based on screen width

css

responsive