How many times have you had to add a big URL into a tiny space and, well, despaired? Take a look at http://rwd.education/code/example_05-04. The problem can also be seen in the following screenshot; notice that the URL is breaking out of its allocated space.
It's easy to fix this issue with a simple CSS3 declaration, which as chance would have it, also works in older versions of Internet Explorer as far back as 5.5! Just add:
word-wrap: break-word;
to the containing element, which gives an effect as shown in the following screenshot.
Hey presto, the long URL now wraps perfectly!
Text truncation used to be the sole domain of server side technology. Nowadays we can do text ellipsis/truncation with CSS alone. Let's consider how.
Consider this markup (you can view this example online at rwd.education/code/ch5/example_05-03/):
<p class="truncate">OK, listen up, I've figured out the key eternal happiness. All you need to do is eat lots of scones.</p>
But we actually...