More Web Design Tutorials

CSS3 – Word Wrap

January 19, 2013

The word-wrap property is supported by all major browsers – and IE. There may not be a huge need for this feature in the English language, there aren’t too many overly long words, but then, it also depends on the size of the container.

This is a box with a very long German word: Donauunterhaltungsdampfershiffahrtskapitän

Forget about CSS3 for a moment and try to say that word!!

If we add

{
word-wrap: break-word;
}

suddenly, things fit:

This is a box with a very long German word: Donauunterhaltungsdampfershiffahrtskapitän

If you have any questions about this tutorial or run into trouble trying it yourself, post your question/problem in the Killersites Forum for help.