CSS line wrapping

Question

Given a block container

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



        

Answer 1

There's a CSS3 property called word-break that may be of some use to you in future.

More information is available here: http://www.css3.com/css-word-break/

The break-all value looks to do the thing you're asking for:

Useful where content contains a majority of Asian character set content, to which this value behaves like ‘normal’. Non-Asian character set content may be arbitrarily broken across lines.

As for more supported versions of CSS, I don't believe there's a way you can do this.

Answer 2

Alternative way achieve the same by enclosing the div in a parent div and setting the width of the parent div. Though it might not be the ideal solution.

<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>

Answer 3

Try this

<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>