Break long strings nicely with <wbr>

Are super-long strings (typically URLs) breaking out of an otherwise narrow column of text in your design? Sprinkle in some <wbr> tags; they don’t take up any space, but provide the browser with safe places to break the string to a new line.

For example, this super-long URL will look normal, but if it’s in a narrow area it’ll linebreak at any of the <wbr> points:

<a href="https://basecamp.com/188854/projects/1034065/messages/6033885">
  https://basecamp.co
  <wbr>
  m/188854/projects/1
  <wbr>
  034065/messages/603
  <wbr>
  3885
</a>

Learn all about the <wbr> at MDN.

Tweet