- The Word Break Opportunity Element

The `` Element

Inline HTML5 Void Element

The word break opportunity element represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

Quick Example

<p>The URL is https://www.<wbr>example.<wbr>com/<wbr>very/<wbr>long/<wbr>path/<wbr>to/<wbr>resource</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The URL is https://www.<wbr>example.<wbr>com/<wbr>very/<wbr>long/<wbr>path/<wbr>to/<wbr>resource</p>

Syntax

<!-- HTML5 -->
<wbr>

<!-- XHTML (also valid in HTML5) -->
<wbr />

The  element is a void element (self-closing), with no content.

Common Use Cases

Long URLs

<p>Visit https://www.<wbr>example.<wbr>com/<wbr>documentation/<wbr>getting-<wbr>started/<wbr>installation/<wbr>index.<wbr>html</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Visit https://www.<wbr>example.<wbr>com/<wbr>documentation/<wbr>getting-<wbr>started/<wbr>installation/<wbr>index.<wbr>html</p>

File Paths

<p>File location: /Users/<wbr>username/<wbr>Documents/<wbr>Projects/<wbr>website/<wbr>src/<wbr>components/<wbr>Header.<wbr>jsx</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>File location: /Users/<wbr>username/<wbr>Documents/<wbr>Projects/<wbr>website/<wbr>src/<wbr>components/<wbr>Header.<wbr>jsx</p>

Long Variable Names

<code>const user<wbr>Authentication<wbr>Service<wbr>Instance = new User<wbr>Authentication<wbr>Service();</code>

Result

Interactive code playground requires JavaScript. Here's the code:

<code>const user<wbr>Authentication<wbr>Service<wbr>Instance = new User<wbr>Authentication<wbr>Service();</code>

Email Addresses

<p>Contact: very<wbr>long<wbr>email<wbr>address<wbr>@<wbr>subdomain.<wbr>example.<wbr>com</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Contact: very<wbr>long<wbr>email<wbr>address<wbr>@<wbr>subdomain.<wbr>example.<wbr>com</p>

Chemical Names

<p>Chemical compound: poly<wbr>tetra<wbr>fluoro<wbr>ethylene (PTFE)</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Chemical compound: poly<wbr>tetra<wbr>fluoro<wbr>ethylene (PTFE)</p>

CamelCase Identifiers

<code>get<wbr>User<wbr>Authentication<wbr>Token<wbr>From<wbr>Local<wbr>Storage()</code>

Result

Interactive code playground requires JavaScript. Here's the code:

<code>get<wbr>User<wbr>Authentication<wbr>Token<wbr>From<wbr>Local<wbr>Storage()</code>

Real-World Examples

API Documentation

<div class="api-endpoint">
<h4>Endpoint</h4>
<code>POST /api/<wbr>v2/<wbr>users/<wbr>{userId}/<wbr>preferences/<wbr>notifications/<wbr>settings</code>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="api-endpoint">
<h4>Endpoint</h4>
<code>POST /api/<wbr>v2/<wbr>users/<wbr>{userId}/<wbr>preferences/<wbr>notifications/<wbr>settings</code>
</div>

File System Paths

<div class="path">
<p><strong>Installation Directory:</strong></p>
<code>C:<wbr>Program Files<wbr>Company Name<wbr>Application<wbr>Version 2.0<wbr>bin<wbr>executable.<wbr>exe</code>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="path">
<p><strong>Installation Directory:</strong></p>
<code>C:<wbr>Program Files<wbr>Company Name<wbr>Application<wbr>Version 2.0<wbr>bin<wbr>executable.<wbr>exe</code>
</div>

Long Package Names

<pre><code>npm install @<wbr>organization/<wbr>very-<wbr>long-<wbr>package-<wbr>name-<wbr>for-<wbr>specific-<wbr>purpose</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<pre><code>npm install @<wbr>organization/<wbr>very-<wbr>long-<wbr>package-<wbr>name-<wbr>for-<wbr>specific-<wbr>purpose</code></pre>

Database Connection Strings

<p>Connection string:</p>
<code>mongodb+srv://<wbr>username:<wbr>password@<wbr>cluster0.<wbr>mongodb.<wbr>net/<wbr>database?<wbr>retryWrites=<wbr>true&<wbr>w=<wbr>majority</code>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Connection string:</p>
<code>mongodb+srv://<wbr>username:<wbr>password@<wbr>cluster0.<wbr>mongodb.<wbr>net/<wbr>database?<wbr>retryWrites=<wbr>true&<wbr>w=<wbr>majority</code>

<!-- Optional break (browser decides) -->
<p>https://www.<wbr>example.<wbr>com</p>

Breaks only if needed for wrapping.

<!-- Forced break (always breaks) -->
<p>Line 1<br>Line 2</p>

Always creates a line break.

Responsive Text

<style>
.container {
  width: 300px;
  border: 1px solid #ddd;
  padding: 10px;
}
</style>

<div class="container">
<p>Without <code>&lt;wbr&gt;</code>:</p>
<p>https://www.verylongdomainname.com/path/to/resource</p>

<p>With <code>&lt;wbr&gt;</code>:</p>
<p>https://www.<wbr>very<wbr>long<wbr>domain<wbr>name.<wbr>com/<wbr>path/<wbr>to/<wbr>resource</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.container {
  width: 300px;
  border: 1px solid #ddd;
  padding: 10px;
}
</style>

<div class="container">
<p>Without <code>&lt;wbr&gt;</code>:</p>
<p>https://www.verylongdomainname.com/path/to/resource</p>

<p>With <code>&lt;wbr&gt;</code>:</p>
<p>https://www.<wbr>very<wbr>long<wbr>domain<wbr>name.<wbr>com/<wbr>path/<wbr>to/<wbr>resource</p>
</div>

Strategic Placement

Place  at logical break points:

<!-- Break at punctuation -->
<p>example.<wbr>com/<wbr>path/<wbr>file.<wbr>html</p>

<!-- Break in camelCase -->
<code>get<wbr>User<wbr>Data<wbr>From<wbr>API()</code>

<!-- Break at hyphens/underscores -->
<code>very_<wbr>long_<wbr>variable_<wbr>name</code>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Break at punctuation -->
<p>example.<wbr>com/<wbr>path/<wbr>file.<wbr>html</p>

<!-- Break in camelCase -->
<code>get<wbr>User<wbr>Data<wbr>From<wbr>API()</code>

<!-- Break at hyphens/underscores -->
<code>very_<wbr>long_<wbr>variable_<wbr>name</code>

CSS Alternative

You can achieve similar effects with CSS:

<style>
.break-word {
  word-break: break-word;
}
.break-all {
  word-break: break-all;
}
.overflow-wrap {
  overflow-wrap: break-word;
}
</style>

<div style="width: 200px; border: 1px solid #ddd; padding: 10px;">
<p class="break-word">https://www.example.com/very/long/path</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.break-word {
  word-break: break-word;
}
.break-all {
  word-break: break-all;
}
.overflow-wrap {
  overflow-wrap: break-word;
}
</style>

<div style="width: 200px; border: 1px solid #ddd; padding: 10px;">
<p class="break-word">https://www.example.com/very/long/path</p>
</div>

(Recommended)
CSS word-break

<!-- Fine-grained control over break points -->
<p>example.<wbr>com/<wbr>path</p>

<!-- Breaks anywhere needed -->
<p style="word-break: break-all;">example.com/path</p>

Zero-Width Space Alternative

 is semantically better than using zero-width space character:

(Better)
Zero-width space

<!-- Semantic HTML -->
<p>example.<wbr>com</p>

<!-- Using Unicode character U+200B -->
<p>example.com</p>

Mobile Optimization

Especially useful for mobile layouts:

<style>
.mobile-text {
  max-width: 300px;
  border: 1px solid #ddd;
  padding: 10px;
}
</style>

<div class="mobile-text">
<p>Repository: github.<wbr>com/<wbr>organization-<wbr>name/<wbr>project-<wbr>repository-<wbr>name</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.mobile-text {
  max-width: 300px;
  border: 1px solid #ddd;
  padding: 10px;
}
</style>

<div class="mobile-text">
<p>Repository: github.<wbr>com/<wbr>organization-<wbr>name/<wbr>project-<wbr>repository-<wbr>name</p>
</div>

Accessibility

Screen readers ignore  elements - they don’t announce breaks or pauses.

Don’t Affect Reading

The element is purely for visual presentation:

<!-- Screen readers read this as one continuous string -->
<p>example.<wbr>com/<wbr>path</p>
<!-- Read as: "example.com/path" -->

When to Use ``

Use  when you have:

Long URLs
File paths
Technical identifiers
Long words or compound words
Code snippets
Email addresses

Don’t use  for:

Regular text content
Forcing line breaks (use  )
Creating visual spacing
Short words

Performance Note

 has minimal performance impact as it’s just a hint to the browser’s line-breaking algorithm.

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	3+	Full support
Safari	4+	Full support
Edge	79+	Full support
IE	5.5+	Partial support

The  element has excellent browser support. Older browsers that don’t recognize it simply ignore it harmlessly.

For forced line breaks. Learn more →

<wbr> - The Word Break Opportunity Element

The `<wbr>` Element

Quick Example

Syntax

Common Use Cases

Long URLs

File Paths

Long Variable Names

Email Addresses

Chemical Names

CamelCase Identifiers

Real-World Examples

API Documentation

File System Paths

Long Package Names

Database Connection Strings

`<wbr>` vs `<br>`

Responsive Text

Strategic Placement

CSS Alternative

Zero-Width Space Alternative

Mobile Optimization

Accessibility

Don’t Affect Reading

When to Use `<wbr>`

Performance Note

Browser Support

Specifications

<wbr> - The Word Break Opportunity Element

The <wbr> Element

Quick Example

Syntax

Common Use Cases

Long URLs

File Paths

Long Variable Names

Email Addresses

Chemical Names

CamelCase Identifiers

Real-World Examples

API Documentation

File System Paths

Long Package Names

Database Connection Strings

<wbr> vs <br>

Responsive Text

Strategic Placement

CSS Alternative

Zero-Width Space Alternative

Mobile Optimization

Accessibility

Screen Reader Behavior

Don’t Affect Reading

When to Use <wbr>

Performance Note

Browser Support

Related Elements

Specifications

The `<wbr>` Element

`<wbr>` vs `<br>`

When to Use `<wbr>`