达到最大宽度时打破表格单元格内容

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

JsFiddle

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

在td 中添加white-space: pre-wrap 或在table 中删除white-space: nowrap

你能在td中添加span标签来实现这个输出吗？

span {
  white-space: pre-wrap
}

JsFiddle 2

但是，您在 table 中设置了 width:100%。我已经将它设置在 px 中，例如 width:1500px。如果您在表格中设置 100% 宽度，剩余的列将在达到其最大宽度之前换行这些文本。

JsFiddle 2 with Width:100%

您可以检查上面的小提琴，我在table 中设置了width:100% 并删除了最后两列。现在，冗长的文本列将适应40vw，而其余列将不会预先包装文本。所以，这也取决于你的父表宽度。

Answer 2

因为您有 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>