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

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

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

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