Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to indicate a potential word break point within a section in HTML?
The HTML <wbr> tag defines a potential line break point within text where the browser may choose to break a line if needed. The acronym <wbr> stands for Word Break Opportunity. This element is particularly useful for long words, URLs, or code snippets that might otherwise cause horizontal scrolling or overflow issues.
Syntax
The <wbr> tag is a self-closing empty element with the following syntax −
<wbr>
In XHTML, it should be written as <wbr /> with a closing slash.
How It Works
The <wbr> tag suggests to the browser where it can break a line if the content doesn't fit within the container width. Unlike a regular space or <br> tag, <wbr> only breaks the line when necessary. If there's enough space, the text remains unbroken.
Common Use Cases
The <wbr> tag is commonly used in the following scenarios −
Long URLs − Breaking lengthy web addresses at logical points
Email addresses − Allowing breaks at the @ symbol or dots
File paths − Breaking directory paths at slashes
Long compound words − Breaking at natural word boundaries
Code snippets − Breaking long function names or variable names
Examples
Example 1 − Basic Usage
Following example demonstrates basic usage of the <wbr> tag −
<!DOCTYPE html>
<html>
<head>
<title>HTML wbr Tag - Basic Usage</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px; width: 300px;">
<h2>Without <wbr> tag:</h2>
<p style="border: 1px solid #ccc; padding: 10px; width: 200px;">
This is a verylongwordthatmightcauseoverflowissuesinsmallcontainers.
</p>
<h2>With <wbr> tag:</h2>
<p style="border: 1px solid #ccc; padding: 10px; width: 200px;">
This is a verylong<wbr>word<wbr>that<wbr>might<wbr>cause<wbr>overflow<wbr>issues<wbr>in<wbr>small<wbr>containers.
</p>
</body>
</html>
The output shows how <wbr> prevents horizontal overflow by breaking long words −
Without <wbr> tag: This is a verylongwordthatmightcauseoverflowissuesinsmallcontainers. (may overflow) With <wbr> tag: This is a verylong wordthatmightcause overflowissuesin smallcontainers. (wraps nicely)
Example 2 − Breaking URLs
Following example shows how to use <wbr> with long URLs −
<!DOCTYPE html>
<html>
<head>
<title>HTML wbr Tag - URL Breaking</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Long URL with Word Break Opportunities</h2>
<p style="border: 1px solid #ddd; padding: 15px; width: 400px;">
Visit our website: https://<wbr>www.<wbr>tutorialspoint.<wbr>com/<wbr>html/<wbr>html_wbr_tag.<wbr>htm
</p>
<h2>Email Address Breaking</h2>
<p style="border: 1px solid #ddd; padding: 15px; width: 300px;">
Contact: verylongemailaddress<wbr>@<wbr>tutorialspoint.<wbr>com
</p>
</body>
</html>
The URLs and email addresses break at logical points when the container is narrow −
Visit our website: https://www.tutorialspoint.com/html/html_wbr_tag.htm (breaks at wbr points if container is narrow) Contact: verylongemailaddress@tutorialspoint.com (breaks at @ or dots if needed)
Example 3 − File Paths and Code
Following example demonstrates <wbr> usage with file paths and code −
<!DOCTYPE html>
<html>
<head>
<title>HTML wbr Tag - File Paths</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>File Path Breaking</h2>
<p style="border: 1px solid #eee; padding: 10px; width: 350px; font-family: monospace;">
/Users/<wbr>admin/<wbr>Documents/<wbr>Projects/<wbr>Web<wbr>Development/<wbr>HTML<wbr>Tutorials/<wbr>index.html
</p>
<h2>Long Function Name</h2>
<p style="border: 1px solid #eee; padding: 10px; width: 300px; font-family: monospace;">
calculate<wbr>Monthly<wbr>Revenue<wbr>With<wbr>Taxes<wbr>And<wbr>Discounts();
</p>
</body>
</html>
File paths and function names break at natural boundaries when space is limited.
Browser Compatibility
The <wbr> tag is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It is part of the HTML5 specification and provides consistent behavior across different platforms.
Key Points
The
<wbr>tag is an empty element and doesn't require a closing tagIt only breaks lines when necessary due to container width constraints
It doesn't add any visual spacing or formatting when not triggered
Multiple
<wbr>tags can be used within the same textIt's particularly useful for responsive design where content must adapt to various screen sizes
Conclusion
The <wbr> tag provides an elegant solution for handling long words, URLs, and code snippets that might cause layout issues. By strategically placing word break opportunities, you can ensure your content remains readable and properly formatted across different screen sizes and container widths.
187 Views
