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

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

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

Пожалуйста, найдите прикрепленное изображение. http://i.stack.imgur.com/xJesQ.png


css word-break
person Vasanth Nedunchezhiyan    schedule 30.07.2014    source источник
comment
Не добавляйте свойство разрыва слова, предложение будет разбиваться на пробелы   -  person Justinas    schedule 30.07.2014
comment
Мне нужно разбить строку или длинное слово на основе ширины div. потому что я использовал разрыв слова   -  person Vasanth Nedunchezhiyan    schedule 30.07.2014
comment
Покажите реальный пример и объясните, как именно должен быть обёрнут текст. В частности, какие длинные слова должны переноситься и как?   -  person Jukka K. Korpela    schedule 30.07.2014
comment
@JukkaK.Korpela См. образец содержимого на изображении i.stack.imgur.com/xJesQ.png . Мне нужно использовать разрыв слова из-за длинных слов. И слова должны переноситься, если они длиннее div, и не должны переноситься, если это маленькое слово.   -  person Vasanth Nedunchezhiyan    schedule 30.07.2014

Ответы (3)


arrow_upward
0
arrow_downward

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

width: 100%
person Miu    schedule 30.07.2014

arrow_upward
0
arrow_downward

Используйте 1_ -

ДЕМО

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

person Danield    schedule 30.07.2014
comment
использовал и это. но слова ломаются. Нужен и используется также word-break. - person Vasanth Nedunchezhiyan; 30.07.2014
comment
Я не понимаю, что вам нужно. Что с этим не так? Посмотрите на демо, и вы увидите, что ломаются только слова, которые шире полной ширины. - person Danield; 30.07.2014
comment
Используйте word-break:break-all; в этой демонстрации посмотреть, что происходит. слова ломаются. - person Vasanth Nedunchezhiyan; 30.07.2014
comment
Почему вы ДОЛЖНЫ использовать word-break:break-all; ??? Это именно то, что вызывает вашу проблему!? - person Danield; 30.07.2014
comment
должен использовать word-break, потому что мне нужно разбить строку или длинное слово на основе ширины div - person Vasanth Nedunchezhiyan; 30.07.2014
comment
@VasanthNedunchezhiyan, как все пытаются сказать и как показывает демонстрация: используйте только word-wrap, а не word-break, и вы достигнете того, чего хотите. - person Peter Sorowka; 31.07.2014

arrow_upward
0
arrow_downward

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

person Vasanth Nedunchezhiyan    schedule 31.07.2014
comment
это точно не элегантное решение. - person Peter Sorowka; 31.07.2014