HTML <wbr> Tag

The HTML  <wbr> (Word Break Opportunity) tag is used to indicate potential line break opportunities within a word or phrase in web content. This tag is particularly useful in responsive web design or when dealing with long URLs, strings of text, or compound words that might otherwise disrupt the layout of a webpage. By inserting a  <wbr> tag, developers can suggest where a word or text can break onto the next line if it does not fit in the current line, improving readability and avoiding overflow issues.

Syntax of the  <wbr> Tag

The syntax of the  <wbr> tag is simple. It is a self-closing tag that doesn't require an end tag, and it's placed within words or long text strings where a line break is allowed.

html
<wbr>

Example syntax:

html
Thisisalong<wbr>wordthatmightneedtobreak.

The browser will break the word at the <wbr> point if it exceeds the container’s width.

Attributes of the  <wbr> Tag

The <wbr> tag does not have any specific attributes of its own. However, like most HTML tags, it supports global attributes such as:

  • class: For applying CSS classes.
  • id: For unique identification of the element.
  • lang: To specify the language of the content.
  • style: For inline CSS styling.
  • title: For additional information when the user hovers over the text.

Examples of HTML  <wbr> Tag

Example 1: Breaking Long Words in Text.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Break Example</title>
</head>
<body>
    <p>This is a long word: supercalifragilistic<wbr>expialidocious that might break onto the next line.</p>
</body>
</html>

In this example, the word "supercalifragilisticexpialidocious" can break at the point where the  <wbr> tag is placed if necessary to fit the layout.

Example 2: Breaking Long URLs

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Breaking URLs</title>
</head>
<body>
    <p>Visit our website: https://www.example.com/verylong<wbr>urlpath/whichneedstobreak.</p>
</body>
</html>

In this example, the  <wbr> tag is used within a long URL to suggest a line break if the URL doesn't fit on one line.

FAQs About the HTML<wbr> Tag

Q1: What is the purpose of the HTML <wbr> tag?
A: The <wbr> tag indicates a possible point where the browser can insert a line break, improving the readability of long words or text that might otherwise overflow.

Q2: Can the <wbr> tag be used to break URLs?
A: Yes, the <wbr> tag is commonly used to suggest line breaks within long URLs, ensuring they display properly on smaller screens or within narrow containers.

Q3: Is the  <wbr> tag visible on the webpage?
A: No, the <wbr> tag does not create any visible output. It only provides a hint to the browser on where to break the text if needed.

Q4: Does the  <wbr> tag support any attributes?
A: The  <wbr> tag does not have specific attributes but supports global attributes such as class,id,style,and lang.

Q5: Is the  <wbr> tag supported by all browsers?
A: Yes, the  <wbr> tag is widely supported by all modern browsers, including Chrome, Firefox, Safari, and Edge.

tools

HTML

Related Articles