The Breaks

With the arrival of CSS, there are many ways to introduce a line-break in text. With the goal of seperating presentation from content, the HTML element BR is not always the best choice.

Traditional Method: the BR element

The White House
1600 Pennsylvania Ave
Washington, DC 20500

Before CSS, using HTML's BR element was the only way to introduce a simple line-break. In addresses, poetry, and other situations where the notion of a distinct line is semantically necessary, BR is a fine choice for the job, but there are situations where a line-break is only preferred for presentation:

Dr. Strangelove, Or: How I Learned To
Stop Worrying And Love The Bomb

The title of Kubrick's classic is not two seperate phrases; The line-break was only used to beautify the display in this presentation. Unfortunately, in this case, BR places a structural break in the markup, having the undesired effect of breaking the line in all HTML-compliant devices (aural browsers might pause while speaking, etc). Take a look in Lynx, or DJ Delorie's Lynx Viewer. The full title would fit nicely on an 80-character display if not for the pesky BR.

For cases like this, it's preferrable to use CSS to create line-breaks. A few of the methods below were suggested by members of the css-discuss mailing list. All style for these methods is in the source for your convenience.

Modern Method 1: display a space as a block (idea)

Dr. Strangelove, Or: How I Learned To Stop Worrying And Love The Bomb

This creates an empty block with zero height to splits the text into two lines.

Caveats:

Using this method inside an inline element, like an anchor, could have unexpected results since the browser is attempting to render a block inside of an inline element.

Modern Method 2: generate the line-break character ("\A") (idea)

Dr. Strangelove, Or: How I Learned To Stop Worrying And Love The Bomb

Here the CSS2 content property inserts a line-break character ("\A").

Caveats:

At the moment, only Opera7 correctly supports this.

Modern Method 3: display the selection as preformatted text (idea)

Dr. Strangelove, Or: How I Learned To Stop Worrying And Love The Bomb

Caveats:

prevents natural line wraps in other locations (but one could simply apply the property to the line-feed using a SPAN)
Web authoring tools may reformat the selection's white-space since it's not inside a PRE element.

Alternate Method: left and right margins

Dr. Strangelove, Or: How I Learned To Stop Worrying And Love The Bomb

Caveats:

can't be applied to inline containers
variation in text/font size is more likely to cause wrap in undesired locations
finding right lengths of margins can be tedious

In summary, where the concept of a line is unneeded structurally, line-breaks should be created with CSS.