Word wrapping
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.
![](https://static.packt-cdn.com/products/9781784398934/graphics/3777_05_04.jpg)
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.
![](https://static.packt-cdn.com/products/9781784398934/graphics/3777_05_05.jpg)
Hey presto, the long URL now wraps perfectly!
Text ellipsis
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...