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

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
}

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

您可以在span中添加td标签以实现此输出吗？

span {
  white-space: pre-wrap
}

JsFiddle 2

但是，您已经在width:100%中设置了table。我已像这样width:1500px在 px 中进行了设置。如果您在表格中设置 100％宽度，则其余列将在达到最大宽度之前包裹这些文本。

JsFiddle 2 with Width:100%

您可以检查上面的小提琴，我在width:100%中设置了table，并删除了最后两列。现在，冗长的文本列将适应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>