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;
}
Yes, it’s essential when I did a website for a thai customer, because in thai they hardly have any breaks….
thanks for sharing
True, this css property is not much talked about, but it’s a real life safer for web designers, specially when you need to break URLs, like you stated in your post.
This CSS property might be quite usefull to apply to chunks of code. I see many web related blogs where code examples break the layout :)
That’s very useful! Would be even more useful if one could define certain characters after which a break is allowed (for instance underscores, dots, slashes, etc).
Really, really useful bit of CSS. Thanks!
Never heard of this before, you continue to unearth web gems, thanks dude!
If it were working with pre … here the support by browsers is horrible.
This is a really good thing to know.
Didn’t know about this one. Thank you!
Didn’t know about this. Thanks!
A really good thing to know. Thank you!!
Thanks for the quick refresher!
Very powerful property, actually. Thanks for sharing :)
By the way; Can’t you show how to create a paper texture like the one you’re using here? :D
AWESOME!
I was fighting with this issue just the other day, and BAM! Here’s a solution.
Thanks again WebDesignerWall!
Opera too!
Great post. I also would strongly agree with your dual monitor suggestion. Right now I use my notebook as both a portable and desktop solution and when at home I plug a 22″ monitor into it to extend the laptop display. It work great! I’d love to have the virtual spaces like Linux and Mac have, but I need a lot of specialized software for my engineering classes that aren’t available for either, and I don’t like dual-booting.
Brayden — if this is still an issue, check out “mDesktop” (code.google.com/p/mdesktop) by Jason Stallings. HTH,
Oh wow! One bad thing about tabs, I posted the message below on the wrong blog. Good post though ;-)
Nice tip… Can you think of a situation where you would ever not want to have word-wrap set to break-word? I ask because I can’t and I’m thinking of adding this to my CSS reset file to set all elements to behave this way by default. Curious what anyone else might think about that as well.
I didn’t know this at all. Well thank you WDW.com :)
this will be very useful, thanks!