What is wbr tag in html

HtmlConceptBeginner · 3 min read

What is the HTML Tag and How to Use It

The  tag in HTML stands for "Word Break Opportunity." It tells the browser where it can safely break a long word or URL to wrap text onto the next line without breaking the word awkwardly.

⚙️

How It Works

The  tag acts like a hint to the browser, showing a spot inside a long word or URL where it can break the line if needed. Imagine you have a very long word or link that doesn't fit on one line. Without , the browser might force the entire word to stay on one line, causing horizontal scrolling or overflow.

Think of it like a soft pause in a sentence where you can take a breath if needed. The browser only breaks the line at the  point if it has to, so it keeps the text looking neat and readable. If the line fits without breaking, the  is ignored and invisible.

💻

Example

This example shows a long URL with  tags inserted to allow line breaks at specific points.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WBR Tag Example</title>
  <style>
    body {
      max-width: 300px;
      font-family: Arial, sans-serif;
      line-height: 1.4;
      border: 1px solid #ccc;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <p>Without &lt;wbr&gt; tag:</p>
  <p>https://www.exampleverylongwebsiteaddresswithoutbreaks.com/page</p>
  <p>With &lt;wbr&gt; tag:</p>
  <p>https://www.example<wbr>verylong<wbr>website<wbr>address<wbr>without<wbr>breaks.com/page</p>
</body>
</html>

Output

A narrow block showing two paragraphs of a long URL: the first line does not break and overflows horizontally, the second line breaks nicely at the inserted points to wrap onto multiple lines.

🎯

When to Use

Use the  tag when you have very long words, URLs, or strings that might break your page layout by overflowing horizontally. It helps keep your text readable and your design neat on small screens or narrow containers.

Common real-world uses include breaking long URLs, email addresses, or code snippets inside paragraphs or buttons where automatic breaks might not happen naturally.

✅

Key Points

The  tag is invisible and only affects line breaking.
It does not add spaces or visible characters.
Browsers break lines at  only if needed to avoid overflow.
It improves readability on narrow screens or containers.

✅

Key Takeaways

The tag marks safe places to break long words or URLs to avoid overflow.

It only breaks lines if necessary, keeping text neat and readable.

Use it for long strings that might break your layout on small screens.

The tag is invisible and does not add spaces or characters.

It helps improve responsive design and user experience.