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. |
Buy domain names at www.networksolutions.com
88 Responses
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!
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
Matt …the following didnt work on ie 7
.wrapIt {
width: 125px;
word-wrap: break-word;
break-word: break-all;
}
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.
[...] 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 */
}
use
div{
white-space: normal;}
and ie issue solve karne ke liye
css
z-index:999; set kar dena
use
div{
white-space: normal;}
and ie issue solve karne ke liye
css
z-index:999; set kar dena
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%;
}
[...] CSS WORD-WRAP – CSS3.com: CSS reference guide, and blog (tags: css ie6 ie7 wrap) [...]
[...] มันเป็น CSS ครับ (Cascade Style Sheet) ซึ่งหลายๆคนรู้จักมันในนาม “โค๊ด Hi5″ นั่นเองครับ สำหรับการใช้ css word-wrap ลองไปอ่านจากที่นี่ดูครับ [...]
[...] CSS word-wrap [...]
try to fix some with..
i al ready done this
can u define Z-index
Mike u can try to this one..
Here is some content for the div element and you can fit width as your requirement.
Thanks ya.. its works
FYI:
.yourclass(#youid)
{
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: normal; /* Firefox */
}
css sucks so much…..
would be better if you could set the property multiline:true; on any text object because this doesnt work for inputs.
[...] CSS word-wrap [...]
I think it should be noted that none of these options will work if you have the unbreaking string within a table inside the div.
Hello guys,
I try this code it works well in Firefox but not in IE.is there any way so that its also works in IE.
ShareFiles
Thank you sooooo much ;)
there is no solution which u show style of txt wiyhout space. just give space between text. problem will automatically solve.
Thanks for this!
[...] word-wrap: break-word has some browser support [...]
Hi .. Even i have the problem of wrapping the large text in area.
I used word-wrap: break-word; in Mozilla. It worked fine. But the thing is I require to use float:left for the div tag. The problem is that word-wrap: break-word; is not working when it is used along with float:left; Somebody please help me!!!!
Thanks in advance ..
[...] CSS word-wrap [...]
Hi Kumar,
Have you got it solution?
If you have already solution, can you share me, please?
Coz I’m stucking with this issue.
Thanks.
ang hirap nman nito..
Matt, Thanks a lot !
This does not work in IE7, but thanks for trying
[...] But it’s CSS3 – http://www.css3.com/css-word-wrap/. [...]
useful info. thanks..soon:)
[...] CSS word-wrap [...]
hey guys i have some problem please guide me…!
i hav an image with display inline…i have text infront of image but when line break because of long text & text lines height will lincrease then image then text goes to the left corner, but i need margin, i want that my text display under the above line instead of image.
kindly guide me i am waiting…
Example is here:
“currently displaying”
(Image) some textsome textsome textsome textsome textsome textsome textsome textsome text.
“I want this”
(Image) some textsome textsome textsome textsome
textsome textsome textsome textsome text.
hi:
try to use this for unbreakable strings:
style=’word-wrap:break-word;display:block;’
word wrpa is not working for input button in opera browser….
how to fix this??????????
sorry word-wrap…..
how to wrap the text for input button in opera???????????
how to wrap the text for input button in opera????????????
set css
word-wrap: break-word;
Wow, fucking good response there AkSHAT.
be sure to set your css to:
word-wrap; break-word;
word-wrap; break-word;
…works for me.
hope i’ll get something
[...] of trial-and-error. The whole class was a terrible mess and a ton of work for functionality that CSS3 word-wrap would fix anyway, but it didn’t take long to realize that the code could be adapted to [...]
[...] CSS word-wrap [...]
This works in IE7+, Firefox, and Chrome to me:
style=”width:772px;word-wrap: break-word;”
The width is needed or the CSS doesn’t work rightly.
Add This:
#container{
width:200px;
height:200px;
border:solid 1px #333;
word-wrap:break-word;
}
p{
white-space: pre-line;
}
It Will Work On All Browser…
Pls Leave A Reply…
style=’word-wrap:break-word;display:block;’ it works for IE, thanks Faisal
p{word-wrap:break-word;}
[...] word-wrap: break-word has some browser support [...]
[...] CSS word-wrap [...]
Oh Jesus, all these spam comments…. Could you please delete them, it’s so anoying to view these spammers, while trying to code beautiful stuph…
Hi, I am able to word wrap by putting the HTML code like this:
sometext
So see its possible and really easy to wordwrap with HTML. In CSS, it might not support such a syntax depending on your web browser, but the HTML tag is guaranteed to work in IE, Mozilla, and Chrome. I dont know about Opera, because I dont use that web browser, but I guarantee to you it will work in the 3 browsers above. Just use the simple HTML code.
[...] Reference: http://www.css3.com/css-word-wrap/ http://www.css3.com/css-word-wrap/ [...]
[...] http://www.css3.com/css-word-wrap/ Rate this:Share this:TwitterFacebookLinkedInGoogle [...]
[...] มันเป็น CSS ครับ (Cascade Style Sheet) ซึ่งหลายๆคนรู้จักมันในนาม “โค๊ด Hi5″ นั่นเองครับ สำหรับการใช้ css word-wrap ลองไปอ่านจากที่นี่ดูครับ [...]
all you have to check is, it could be that the defined limit of the div, is too long or wide. this can be possible if the div has not much content above what you are trying to display, that means it could be a transparent background and it moves too long to the right so much that you cant notice it. Just change the color or add a color to the div, you might see the starting and the ending point of it.
if you find it, then you can surely fix it, if not ask.