Таблицы загрузочных таблиц, переполненные длинным несвязанным текстом

Я использую Bootstrap, и у меня есть таблица с несколькими столбцами, последняя из которых иногда имеет длинный фрагмент текста без пробелов. Я заметил, что при определенных размерах экрана таблица переполнит родительский div и создаст уродливое совпадение со своей дочерней таблицей.

Я играл с ним, и я думаю, что проблема связана с тем, что текст не расставлен. Я создал jsfiddle, который демонстрирует, что я имею в виду.

Как вы можете видеть, верхняя левая таблица хорошо себя ведет и просто растет вертикально, чтобы разместить больше текста. Тем не менее, нижняя левая таблица приводит к переполнению справа из-за длинного несложенного текста, а правый стол внизу нижнего левого стола завершается "под" его братом.

Есть ли у кого-нибудь советы о том, как я могу это исправить, чтобы очень длинный текст обрезался или частично разбивался на новую строку?

Ответ 1

Добавьте следующие стили в свой <table>

.the-table {
    table-layout: fixed;
    word-wrap: break-word;
}

Затем вы можете настроить свой макет через CSS, как пожелаете.

Ответ 2

Это работает без форматирования таблицы. Просто добавьте его в td или любой

.is-breakable {
  word-break: break-word;
}

Ответ 3

У меня возникли проблемы с этими решениями, работающими в Internet Explorer.

Я использовал следующий стиль, чтобы заставить его, наконец, работать.

<td style="word-break: break-all">

Ответ 4

Вы можете использовать ниже css. Это обернет текст и применит... в конце текста.

например. This_is_a_large_text будет изменен на This_is_a_lar...

td {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Вы также можете добавить подсказку для показа полного текстового значения.

<td data-toggle="tooltip" title="${text}">${text}</td>