dontyoujusthatelongwords?
Content is king. Design is queen. And we all know about the pitfalls of marriage. The balance between the two can be somewhat vague at times and is often directly influenced by project parameters (bad timing, missed deadlines, ...). If you like reading design blogs you'll know that a design should guide and enhance the content, and while that is most definitely a valid statement reality often decides otherwise.
Before I go on, let me make it clear that I'm talking about the actual content itself here. The information architecture process usually comes quite early in a project, but it is often based on global notions of what content should appear on the site and focuses on how that content should be structured and unlocked, not on actual ready-to-publish texts.
reality check
Most designs are made using "lorem ipsum" content. We all know that this is not the right way to tackle a design but more often than not a project doesn't leave us with many other options. And so we proceed with our work, realizing the actual content might not fit well into the design that's being made. To make it worse, bad (or complete lack of) copywriting can mess it up even more. You might have designed a horizontal navigation, but when it turns out the text for each link is half a sentence long rather than a clear and concise label you're in for some serious trouble.
As for today's topic, let's take a closer look at how long words (without spaces or split characters) can mess up your layout and how it can be fixed using some simple css.
the old days
If a single word is too long to fit into a designated space your options are limited by default, but back in the old days you were really screwed. You could only do one of the following things:
- Do nothing and let the content spill out the designated space, possible overlapping other elements. Ugly as hell, but at least the whole word was readable.
- Apply an
overflow:hiddento the parent and hide the content that spills outside the designated space. Add fixes for IE and hope you're not hiding something crucial. - Change the content to fit the design, either doing a little copy work or manually insert split characters (fe '-') inside the problematic words.
All of these options suck, but it was all we could do back then ...
modern times
Luckily css3 is catching up with our styling needs and we've been given a new option to toy around with. Still not perfect, but a whole lot better than the previous three: check out the word-wrap css property. Surprisingly enough, a property long ago introduced by Microsoft. Go figure.
selector {word-wrap:break-word;} When set to break-word this property will break off a word when it doesn't fit on a single line. Note that it will not break off every word when it reaches the end of a line, just the words that won't fit as a whole. It's still not ideal as there is no indication whatsoever that a words is cut off, but at least it gives us another good option to consider, one that's quite useful in most situations.
And best of all ... it works in all modern browsers + the ie6+ range. What more could you ask for.
conclusion
It's little additions like these that make a big difference when you are near deadline and it turns out the given content won't fit into your design. Rather than start redesigning certain parts with the chance of breaking other stuff in a series of browsers, you can simply apply the break-word to cut off problematic words into separate pieces without losing any of the content.