css - 达到最大宽度时中断表格单元格内容

Question

我有一个这样的 HTML 表格:

div {
  width: 100%;
  overflow-x: auto;
}

table {
  white-space: nowrap;
}

td {
  border: 1px solid gray;
  padding: 5px 10px;
  
  min-width: 100px;
  max-width:40vw;
}

<div>
  <table style="width: 100%;">
    <tr>
      <td class="block">1</td>
      <td class="block">A table cell content</td>
      <td class="block">This should be a text that breaks after 200px Lorem ipsum dolor sit amet</td>
      <td class="block">A table cell content</td>
      <td class="block">A table cell content</td>
      <td class="block">A table cell content</td>
      <td class="block">A table cell content</td>
    </tr>
  </table>
</div>

结果:

问题是，当达到 max-width 时，文本应该换行。我知道 white-space: nowrap 会导致这个问题，但如果没有它，文本会在达到 max-width 之前换行。

Answer 1

因为你有 white-space: nowrap; 它不会中断，但你可以将类添加到你想要中断的 td 希望这对你有帮助谢谢。

.no-white-space{
white-space: normal;
}

div {
  width: 100%;
  overflow-x: auto;
}

table {
  white-space: nowrap;
}

td {
  border: 1px solid gray;
  padding: 5px 10px;
  
  min-width: 100px;
  max-width:40vw;
}

.no-white-space{
white-space: normal;
}

<div>
  <table>
    <tr>
      <td class="block">1</td>
      <td class="block">A table cell content</td>
      <td class="block no-white-space">This should be a text that breaks after 200px Lorem ipsum dolor sit amet</td>
      <td class="block">A table cell content</td>
      <td class="block">A table cell content</td>
      <td class="block">A table cell content</td>
      <td class="block">A table cell content</td>
    </tr>
  </table>
</div>