Creating Breaks

Creating Breaks

There are two elements that you can use to deal with line breaks in content: the br and wbr elements.

Forcing a Line Break

The br element introduces a line break. The style convention is to move subsequent content onto a newline.

Note: The br element may be used only when line breaks are part of the content. You must not use the br element to create paragraphs or other groupings of content.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    I WANDERED lonely as a cloud<br />
    That floats on high o'er vales and hills,<br />
    When all at once I saw a crowd,<br />
    A host, of golden daffodils;
  </body>
</html>

Output:

Indicating an Opportunity for a Safe Line Break

The wbr element is new to HTML5 and indicates where the browser could reasonably insert a line break to wrap content that is larger than the current browser window. It is the browser that makes the decision as to whether or not a line break is actually used. The wbr element is simply a guide to suitable places to break content.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    This is a very long word: Super<wbr />califragilistic<wbr />expialidocious.
    We can help the browser display long words with the
    <code>wbr</code> element.
  </body>
</html>

Output:

To understand the value of the wbr element, you have to see how the browser operates with and without the use of the element. Try resizing the preview pane above to see how the browser behaves with the wbr element. Repeat the same thing after removing the wbr element. Without the wbr element, the browser encounters the long word and treats it as a single unit. This means that you end up with a large amount of wasted space at the end of the first line of text.