HTML wbr: suggest a break inside an unbroken identifier

Use it in a concrete workflow

A narrow audit panel displays a generated shipment reference that has no spaces. Adding a possible break after its fixed prefix keeps the identifier readable without changing the characters that users copy. The browser may choose another break based on available width. If a code must remain one unbroken unit for machine parsing, store and transmit its original value independently rather than scraping text from a rendered panel.

<p>Shipment reference:
  <code>WEST47-<wbr>DEPOT19-<wbr>REVIEW204</code>
</p>

Behavior and ownership

A soft break is a layout opportunity, not a delimiter in the business identifier. The code remains the same sequence of visible characters; test selection, copy, and screen-reader reading for the intended audience.

Performance and maintenance

Wbr adds tiny DOM overhead. It cannot repair a container with a fixed width or a design that clips overflow, so check the complete page at mobile sizes.

Common Mistakes

• Do not insert spaces that alter an identifier's meaning.
• Do not expect wbr to force a line break at every width.
• Do not use it to conceal a broader overflow problem.

Connected lessons

• HTML inline text: emphasis, importance, code, and abbreviations
• HTML viewport metadata: let a mobile layout use device width
• HTML character references: escape data before inserting it into markup

Continue with HTML pre and code: preserve source layout without hiding the meaning.