Line break control

• Non-Breaking Space
• Non-Breaking Hyphen
• Adding Line Breaks
  • Break (<br>) Tag
  • Line Break Opportunity (<wbr>) Tag

---

Non-Breaking Space

A non-breaking space can be added to text using one of the following codes:

1. non-breaking space code
   ( )
2. a noWrap code
   (<span class="noWrap"></span> /
   <span class="nowrap"></span>)
3. a wrap-none code
   (<span class="wrap-none"></span>)

Use the non-breaking space to do the following:

• prevent content from splitting over multiple lines, which reduces readability
• ensure that items (such as dates, names, numbers, percentages, some hyphenated words, certain phrases, etc.) do not become separated at the end of a line
• keep the last two words of a paragraph together to prevent a single word from appearing by itself on a line
• keep words at the beginning of a parentheses together with the rest of the text (e.g. text).

---

Non-Breaking Hyphen

The code for non‑breaking hyphen is ‑. This code is useful for keeping items such as hyphenated words (e.g., those words with short prefixes like "e-" or "co-") and telephone numbers together on a line.

Adding Line Breaks

Break (<br>) Tag

The <br> tag inserts a single line break. This tag is useful for adding a line break when including addresses, etc.

Do not use multiple <br> tags (e.g. <br><br>) to:

• separate paragraphs—use the <p></p> tags instead; or
• add spaces between items in an unordered or ordered list—use <ul class="space"> or <ol class="space"> instead.

Line Break Opportunity (<wbr>) Tag

The <wbr> tag does not necessarily add a line break, it just specifies a line break opportunity where a line break can occur if one is required.

This tag can be used for very long words or for long strings of text with no spaces (such as long URLs) where you would like to control where the line break will occur. Without the <wbr> tag, the word would either wrap at a strange place (making it difficult to read) or not wrap at all (thereby creating a large white space at the end of the line or pushing all the content to the next row).

The difference between the <wbr> tag and the <br> tag is that the <br> tag forces a line break. The <wbr> tag only adds a line break if one is necessary.