Разбить содержимое ячейки таблицы при достижении максимальной ширины

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. Если вы установите 100% ширина в таблице, оставшиеся столбцы будут переносить этот текст до достижения его максимальной ширины.

JsFiddle 2 с шириной: 100%

Вы можете проверить приведенную выше скрипку, я установил width:100% в table и удалил последние 2 столбца. Теперь длинный текстовый столбец будет адаптироваться к 40vw, а остальные столбцы не будут предварительно обтекать текст. Таким образом, это также зависит от ширины вашей родительской таблицы.

так как у вас есть 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>