CSS: long word, small space

I often find myself in need of dealing with long words that make the text overflow its container, especially when I'm working with UI for web applications that need to be localized in other languages (in Germany, for example, they do have some looong words).

There are a few ways to overcome this issue: obviously, if the layout allows it, make room for the big word, make the font smaller, try reducing letter-spacing etc.

In some cases however these may not be options, but you may be willing to try and do something prettier than a plain cruel overflow: hidden

Example:

<div class="some-small-div">
    Hey there! I'm a text! I am sitting in a small div and I contain a veryVeryLongWord!
</div>

 .some-small-div {
    width: 200px;
    padding: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}

if you have room to make the text grow vertically and you don't mind truncate the long word, it may be the case for the super-compatible word-wrap property (that will soon be replaced by the overflow-wrap property)

Here is an interesting article covering the topic of word-wrap extensively: Word Wrap on impressiveweb.com

 .some-small-div {
    [...]
    word-wrap: break-word;
}

This is the result:

The surprising an cool thing is that the word-wrap property is part of CSS since forever and is even compatible with IE5 (!)

Another more refined approach, if the word you are truncating has not a critical meaning for your application, is to apply the text-overflow: ellipsis property that will truncate gracefully your dreaded long word with a nice ellipsis.
This tecnique is especially useful when you have a container with strict fixed dimensions.

.some-small-div {
    [...]
    text-overflow: ellipsis;
}

More on ellipsis on html5hub