Обертка строк в CSS

Для контейнера блоков

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

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

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

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

Ответ 1

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

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

Значение break-all похоже на то, что вы просите:

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

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

Ответ 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>

Ответ 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>