Today I'm going to talk about a rarely used but extremely useful CSS property, the word-wrap. You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list. Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
CSS: Word-Wrap Property (view demo)
You can specify either normal or break-word value with the word-wrap property. Normal means the text will extend the boundaries of the box. Break-word means the text will wrap to next line.
.break-word {
word-wrap: break-word;
}
Doesn’t work with white-space:pre either. But awesome none the less
Note that the css property only works with block level elements ..
Doesn’t seem to have an effect on LEGEND tags in FF4, Chrome or IE7.
Sometimes it works and sometimes it doesn’t. Any time someone has constructed an example, it works. But when I try to use it in actual practice, sometimes it works and sometimes it doesn’t. I wish there was some list of rules to determine when and where it is supposed to work. In one example, it doesn’t work on a div, unless the text within the div is in a p.
Try adding
white-space: normal;
to the element.
Thanks ToS!
This was exactly what worked for me.
I’m using .NET and in a GridView (TemplateField) trying to get a cell to linebreak. The original solution worked in IE9 but I kept getting “run-on” content in FireFox 6 and Opera 11 (not sure about Chrome).
Your solution fixed this cross-browser.
very short solution for wordwrap. thanks for it.
Nice tip! Bookmarked this!
Wow, that was extremely useful ! Thank you mate :]
Do not function in table td tag within the firefox browser :(
Try with in-line style
I’ve read on a forum that works.
Try using table-layout: fixed if using within tables (as well as the break-word bit).
Thanks a bunch for sharing this with all of us you actually know what you are talking about! Bookmarked. Kindly also visit my site =). We could have a link exchange contract between us!
Its very useful!!!!
Thanks! Just what I needed!
Just testing
I love this page..
Sorry.. its not working.. I used as follows :
blah blah…..
But it doesn’t seems to work.. Can anybody help me..?
Sorry…
I used this style in para tag inside td tag.. Still it is not working…
Suggestion needed..
Use
word-break:break-all
instead
Dont forget you need to set the width of the container too
Thanks @Muz
In one place word-break:break-all worked when word-wrap: break-word; didn’t. You saved my night.
Cheers
worked! Thanks..
i m genrating dynamic text field and apply word press on this text field, in crome its not working right its take enter after every charecter, can u suggest me any best idea
the code is below:
var emphatic:TextFormat = new TextFormat();
dynamic_txtdis.type = “dynamic”
dynamic_txtdis._width = 200
dynamic_txtdis._height = 200
dynamic_txtdis.autoSize=true;
dynamic_txtdis.multiline=true;
dynamic_txtdis.htmlText = “Demo test is here for the testing purpose”;
dynamic_txtdis.border=true;
dynamic_txtdis.wordWrap=true;
dynamic_txtdis.html = true
dynamic_txtdis.setTextFormat(emphatic);
Great Solution Works prefectly with div tag and width style
asasadsa