CSS перенос строк

Question

Учитывая блок контейнера

<div>
 this is a very long string which contains a bunch of characters that I want to break at container edges.
</div>

есть ли какие-либо свойства css, которые я могу установить, чтобы заставить его разрываться, когда он достигает ширины контейнера, независимо от содержимого строки, например, разрыв:

this is a ve
ry long stri
ng which ...

это почти то, что я хочу. Прямо сейчас, кажется, всегда предпочитают разбивать пробельные символы или другие специальные символы (такие как /).

Answer 1

В CSS3 есть свойство word-break, которое может пригодиться вам в будущем.

Более подробная информация доступна здесь: http://www.css3.com/css-word-break/

Значение break-all выглядит каксделайте то, что вы просите:

Полезно, когда контент содержит большую часть контента азиатского набора символов, для которого это значение ведет себя как «нормальное».Содержимое неазиатских наборов символов может быть произвольно разбито на строки.

Что касается более поддерживаемых версий CSS, я не верю, что есть способ сделать это.

Answer 2

Попробуйте это

<style type="text/css">
div {
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}
</style>

<div style="width:200px">
adsjflk;asjfl;kasdjfl;kasdjfl;kasdjf;lkasdjf;lkasdjf;lkasjdf;lkajsd;lkadfjs;l
</div>

Answer 3

Альтернативный способ добиться того же, заключив div в родительский div и установив ширину родительского div. Хотя это не может быть идеальным решением.

<div style="width:50px">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
        </div>