CSS: handling long links

Long links are quite easy to handle with CSS. In fact, links are simply inline elements that follows the basic flow of text lines, including line breaks. When the text of a link encounters the end of a line, the link is broken into several parts that will be placed on the new line. This is a normal behavior in CSS. However, sometimes it's preferable to get more control over the disposition of links within lines. In this post I'm going to show you how to accomplish this task in a very simple way.

To begin with, let's see what happens to a link when it's too long to stay on the same line:

As you can see, the link has been simply broken into two parts, one per line. To make the link stay on the same line, we can turn it into a block-level element so that it has a line on its own:

a.long {
 display: block;
}

And here's the result:

This solution is really simple and doesn't require much effort nor coding.