Как сделать разрыв строки на основе ширины div и не должен разбивать слово, если это не длинное слово в css

Question

Мне нужен разрыв строки в div на основе ширины div. Ширина div является динамической. Слово не должно нарушаться, если оно не длинное.

Я использовал слово-разрыв: разрыв-все и перенос слов: разрыв-слово. Строки ломаются, как мы и ожидаем, но слово тоже ломается. Но мы не нарушаем слово.

Пожалуйста, найдите прикрепленное изображение.

Answer 1

Попробуйте использовать css bootstrap scaffolding или отзывчивые столбцы, вы также можете попробовать сделать css из div для

width: 100%

Answer 2

Да, это работает сейчас. Я использую таблицу внутри div, который имеет один <tr> и один <td> лайк <div> <table style="table-layout: fixed;width: 100%;word-wrap: break-word;"><tr><td> ....content.... </td></tr></table> </div>, Теперь разрыв строки работает на основе ширины div, а также разбивает слово, если оно не длинное слово.

Answer 3

Использование word-wrap:break-word -

DEMO

Таким образом, будут разбиты только слова, которые шире полной ширины контейнера.