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;
}
Oops! Standard html tags like <br> and Sorry, all this html is turning my brain to mush.
Awesome, tip!!! Thanks a lot! :)
In fact, word-wrap:break-word sometimes does not properly if an element has no width determined, or it is determined with relative values (e.g. %).
This is a great inspiring article.I am pretty much pleased with your good work. ugg classic cardy You put really very helpful information. Keep it up. Keep blogging.
bu dağların nesine geldim şiir kuzular sesine geldim
That will really help us all. And this might bring some good repute to you.
very handy tip!
This is a very helpful tool thank you
Thank you for this! You saved me a bunch of frustration with a too-wide div display!
Great! Saves a lot of link text truncating :)))
That’s Great! Thanks for the post!
This is a very helpful tool thank you
Few
Now that was too simple. I will use this on Melissa’s notary site.
San Diego Mobile Notary
Nice and simple. Did the trick, thanks ;)
Thanks for the tip, nice CSS on this site.
The collapse / expand on the comments is a good idea.
Nice :) thanks a load
great tip!
I only knew the opposite:
white-space: nowrap
which is quite handy too…
and there seems to be a word-break tag too, but it’s only taking inherit as value…
cheers
stefan
Why not use your trick instead of using an image as a demo?
Worth to mention that this doesn’t work if the parent element is set to:
white-space : nowrap;
Associate researchers. Dr. Shah, people with ADHD “different thinking” they know better than laboratory measurements, but this situation in real life it could do with this work a success and said they did not know çevirmediklerini turn.