CODEWITHSUNDEEP
css
Mic
Mic

Reputation: 6981

CSS line wrapping

Given a block container

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

are there any css properties I can set to force it to break when it reaches the container width, regardless of the contents of the string, for example a break like:

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

is pretty much what I want. Right now, it seems to always prefer to break at whitespace characters or other special characters (such as /).

Upvotes: 11

Views: 24932

Answers (3)

Amit Rai Sharma
Amit Rai Sharma

Reputation: 4225

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>

Upvotes: 2

Galen
Galen

Reputation: 30170

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>

Upvotes: 5

Jamie Dixon
Jamie Dixon

Reputation: 53991

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.

Upvotes: 11

Related Questions