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

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

0 голосов
/ 28 февраля 2019

У меня есть такая 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>

Результат:

The rendered HTML/CSS

Проблема в том, что текст долженобернуть при достижении max-width.Я знаю, что white-space: nowrap вызывает эту проблему, но без этого текст переносится до достижения max-width.

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

, поскольку у вас есть 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>
0 голосов
/ 28 февраля 2019

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

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

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

...