Front-end
Reference Search

<wbr>

By Dan Gold

<wbr> marks a place where the browser may break a line if needed. It does not force a break or insert a visible hyphen.

Wrap a long identifier

The first line can break at the two chosen boundaries. The second has no break opportunities at those positions.

Inspect wbr markupLink

HTML and CSS

HTML

<p class="sample">workshop<wbr>registration<wbr>number</wbr></wbr></p>
<p class="sample">workshopregistrationnumber</p>

CSS

.sample {
  width: 12ch;
  border: 1px solid #94a3b8;
  padding: 0.5rem;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Placement and alternatives

Wbr is void, has no end tag, and accepts global attributes. Put it within phrasing content. The surrounding text retains its characters; do not insert a literal space into a displayed URL and call it the same URL.

For arbitrary long user content, CSS overflow-wrap is often more suitable than adding break markers manually.

Exercise

Increase the width to 40ch: the text should stay on one line when it fits. Use br for a mandatory content line break and &shy; when a break should show a hyphen. white-space: nowrap can prevent optional wrapping.

Sources and browser support

MDN: wbr describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.