CSS WORD-WRAP
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. |
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?
Your browser may not support the word-wrap property – it was an IE invention… I had the same problem!
use
div{
white-space: normal;}
Seriously, there has to be a better string for stylesheets to wrap text regardless of browser. This doesn’t even work in IE7!
it’s not working with firefox ?
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”
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"
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.
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?
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
Its important that all browsers add this functionality, we should not need to rely on JavaScript or server-side scripting to do something as simple as this.
I really want word-wrap to work in mozilla browser.
But not getting any ideas. So far i have truncated the string or used the program to do this.
If you are scripting in PHP, use the WORDWRAP function: http://us2.php.net/wordwrap
Well that could work i suppose.
I would simply use a regular expression to block, or break words which are to long.
Mozilla have implemented this property so should be appearing in a firefox near you soon.
https://developer.mozilla.org/web-tech/2008/08/20/word-wrap-break-word/
Still on this Site i can see the strings not broken.
Much are just too long for the div’s.
A workaround for that is needed.
Hi srikanth,
To wrap a word in mozilla use folloing style class.
.mainLink {
white-space:-moz-pre-wrap;
white-space: normal;
}
I tried this, but it doesn’t seem to validate under CSS 3 validation on w3c.org. Is it really a CSS 3 property or just another useless Microsoft invention that doesn’t work?
I simply fix the problem when forms are submitted. Since we are talking about user input, the form needs to be validated anyway – say with PHP. Do a reg expression to find strings longer than x length, and either break it up into chunks, trim it and set a title attribute so it comes up on hover. Only real difficult scripting would be the links, ensuring you keep the href intact. Using BB script for posting (like many forums do), this should be easy.
I am sure there are scripts available.
Joe
Dudes …
To wrap a word in IE7 use this:
.wrapIt {
width: 125px;
word-wrap: break-word;
break-word: break-all;
}
seems to me you need layout (a width) and just use both of the above … may be you could even use width: auto …
Anyway … I guarantee you this works in IE7 ..
Over and Out
This will work in IE fine but not in MOZILLA
word-wrap: break-word;
is supported now in Gecko 1.9.1/ Firefox 3.5.
For details see
https://developer.mozilla.org/en/CSS/word-wrap
j.j.
Matt …the following didnt work on ie 7
.wrapIt {
width: 125px;
word-wrap: break-word;
break-word: break-all;
}
[...] CSS word-wrap [...]
[...] CSS word-wrap [...]
[...] CSS word-wrap [...]
[...] CSS word-wrap [...]
[...] CSS word-wrap [...]
[...] CSS word-wrap [...]
[...] CSS word-wrap [...]
[...] CSS word-wrap [...]
[...] CSS word-wrap [...]
[...] CSS word-wrap [...]
[...] CSS word-wrap [...]
Width worked as Bob suggested above. Text in the Div was wrapping in Firefox but not IE
width:300px; now it works
Thanks Bob
George
Word break css is not working in my site whenever i have open site in Firefox, it works fine in ie..
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
@ Patel
To fix the above issue in Firefox you need to add the below property.
white-space: normal;
FYI:
.yourclass(#youid)
{
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: normal; /* Firefox */
}
Hi,
I want to wrap word, and i have fluid layout so i can’t use fixed width for it. Mean time its not working for % and is this word-wrap work fine for td?.
Filter Name 1Thisilterisaboutthisandhishasotherdetailstherdetails
.wrap_word{
word-wrap:break-word;
width:100%;
}