This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip’ and ‘overflow’ properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.
Examples
| div { word-wrap: break-word }
<div style=”word-wrap: break-word”>Here is some content for the div element</div> |
Possible Values
| Value | Description |
|---|---|
| normal | Content will exceed the boundaries of the specified rendering box. |
| break-word | Content will wrap to the next line when necessary, and a word-break will also occur if needed. |
October 11th, 2007 at 2:32 am
Hi there!
Thank you for the info, but somehow I still cannot get the text to wrap even using word-wrap: break-word. My problem is that I have an unbreakable string eg. “../eng/resources/unitednations/unpoarevconf/regcoposstats/RwandanCivilSocietyRecomm.pdf”
and pushes the div ignoring the width restriction… is there hope for this case?
October 30th, 2007 at 5:59 am
Your browser may not support the word-wrap property - it was an IE invention… I had the same problem!
December 19th, 2007 at 10:24 pm
Seriously, there has to be a better string for stylesheets to wrap text regardless of browser. This doesn’t even work in IE7!
January 13th, 2008 at 8:22 am
it’s not working with firefox ?
February 8th, 2008 at 12:02 am
Rather than force the string to break, shouldn’t an unbreakable string be handled this way?
div.codeWrapper pre {
padding: 0;
margin: 4px 15px;
}
div.codeWrapper {
padding: 15px 0;
margin: 1px 0;
}
html>body div.codeWrapper {
overflow: auto;
}
unbreakable string “../eng/resources/unitednations/unpoarevconf/regcoposstats/RwandanCivilSocietyRecomm.pdf”
February 8th, 2008 at 12:08 am
Rather than force the string to break, shouldn’t an unbreakable string be handled this way?
<style>
div.codeWrapper pre {
padding: 0;
margin: 4px 15px;
}
div.codeWrapper {
padding: 15px 0;
margin: 1px 0;
}
html>body div.codeWrapper {
overflow: auto;
}
</style>
<div class="codeWrapper">
<pre>
unbreakable string "../eng/resources/unitednations/unpoarevconf/regcoposstats/RwandanCivilSocietyRecomm.pdf"
May 26th, 2008 at 8:56 pm
Are there some other parameters which can be given? I got a situation where I need to show the line like this
“example example exa…” within the given width.
May 28th, 2008 at 8:09 am
I have a textarea that I want to force a wrap on.
It will wrap fine if you type in it. BUT I have little javascript buttons that allow you to insert “bold” or “italic” style. A prompt comes up and asks for the text to be Bolded, or italic’d. Well if you enter a really long string, it will break the wrap and go out indefinitely to the right, this messes the page up where you view the message you have written.
Any Ideas?
June 19th, 2008 at 2:23 am
the WIDTH attribute will work.. I was have wrapping problems.. I set the text in the container to a smaller width and boom the text wrapped.
div container is 400px wide
set width:300px;
works!
Cheers,
Bob