Controlling Line Breaks

With web pages you don't have to tell the browser exactly where to break your content into separate lines. In fact if you were to try to be specific as to where every line break should occur then you will almost certainly break your web page since not everyone will view the page at the same width or with the text the same size. The flexibility that HTML offers in being able to let the text break into separate lines based on what will fit provides far more flexibility. Of course there are those situations where there are actual line breaks in the content itself (for example poetry) where the position of the breaks is relevant and those situations is what HTML provides the <br> tag for (and XHTML the <br/> tag).

Where two words must be kept together on the same line because they are effectively the one word but with a space in the middle we can use &nbsp; (the non-breaking space character) instead of a regular space. We should only do this however where the space being non-breaking is actually a part of the content and where the two words are effectively one word with a space in the middle. This is perhaps more common when displaying programming code where the line break itself has a meaning and whether two adjacent tokens are on the same line or different lines have different meanings (for example if you are displaying JavaScript code you would probably use a non-breaking space between the return keyword and whatever follows it as a line break in that position would change the meaning of the code).

Where you just want to keep words together for the sake of appearance using a non-breaking space is inappropriate since while we may want to keep the two words on the one line when displayed on one device, the same may not be required for other devices. Since CSS can be specified to provide different appearances for different devices a CSS solution is more appropriate in this instance. To do this we would wrap the two words inside of a <span> tag and then apply white-space : no-wrap; to that span for the media where we want to ensure that the content stays together on the one line.

The opposite problem occurs where we have one block of content either without spaces or where non-breaking spaces or no-wrap is used where the content ends up too long to fit. This can destroy our page layout by forcing its container to be much wider than we specified or alternatively it may just overflow out of the container. Either way that isn't what we want.

Modern browsers provide solutions to this problem as well. The soft hyphen character (&shy;) inserted into a word tells the browser that it can break a word at that position if it doesn't fit on the one line. Just how much control this gives you will depend on whether the browser considers the soft hyphen permission to always split the word at that point if the part of the word preceding the hyphen will fit on the line or whether the browser only splits the word at that point if the word is wider than the container.

Where you have two pieces of content wrapped in span tags or other inline tags where there is no space between the closing tag for the first piece of content and the opening tag for the second piece of content (and no white space adjacent to the other side of either tag or where they have no-wrap applied) you have two larger pieces of content that the browser will place together on the one line. If we want to allow the browser to insert a line break between these two tags where they don't fit the one line we need to apply CSS to those inline tags so that they are not inline any more. Modern browsers allow you to set display : inline-block; to specify that a line break can be inserted in this situation when required.

By using the appropriate HTML or CSS commands to specify where line breaks are and are not allowed we can better control how our web pages will appear when our visitors view the page in a larger or smaller viewport or where they change the size of the text from what we specified as the default. This makes our page more usable for a larger number of visitors since not everyone will view the page using our specified defaults and those that don't will usually have a good reason for the changes they apply.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow