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 allow no breaks in the enclosed text in HTML?
To prevent line breaks in enclosed text in HTML, the <nobr> tag was traditionally used to force content onto a single line regardless of length. However, this tag is deprecated and not supported in HTML5. Modern HTML uses CSS properties like white-space: nowrap to achieve the same result with better standards compliance.
Syntax
Following is the deprecated syntax for the <nobr> tag −
<nobr>Text content</nobr>
Following is the modern CSS approach −
white-space: nowrap;
The Deprecated <nobr> Tag
The HTML <nobr> tag instructed browsers not to break the specified text, forcing it onto a single line. When text exceeded the viewport width, users needed to scroll horizontally to read the complete content. This tag worked with the <wbr> tag, which provided optional break points within non-breakable text segments.
The <wbr> tag differs from <br> in that it only creates a line break when the content would otherwise extend beyond the browser window margins. Unlike <br>, which always forces a break, <wbr> works conditionally within <nobr> sections.
Example − Deprecated <nobr> Tag
Following example demonstrates the deprecated <nobr> tag usage −
<!DOCTYPE html>
<html>
<head>
<title>Deprecated nobr Tag</title>
<style>
h1 { color: blue; text-align: center; }
h4 { text-align: center; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h1>TutorialsPoint</h1>
<h4>HTML nobr tag (deprecated)</h4>
<nobr>Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</nobr>
</body>
</html>
The output forces the entire text onto one line, requiring horizontal scrolling if the text exceeds the viewport width −
TutorialsPoint HTML nobr tag (deprecated) Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects. (single line, may require scrolling)
Example − Using <wbr> with <nobr>
Following example shows how <wbr> provides optional break points within <nobr> content −
<!DOCTYPE html> <html> <head> <title>nobr with wbr Tag</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <nobr>This is a very long sequence of text that is forced to be on a single line, even if doing so causes <wbr>the browser to extend the document window beyond the size of the viewing pane and the poor user must scroll right <wbr>to read the entire line.</nobr> </body> </html>
The <wbr> tags provide optional break points where the browser can wrap the text if needed, but only when the content would otherwise overflow.
Modern CSS Approach − white-space Property
The recommended modern approach uses the CSS white-space property with the nowrap value. This achieves the same effect as <nobr> while maintaining HTML5 compliance and better semantic structure.
Example − CSS white-space: nowrap
Following example demonstrates the modern CSS approach to prevent line breaks −
<!DOCTYPE html>
<html>
<head>
<title>CSS No Break Text</title>
<style>
.no-wrap {
white-space: nowrap;
background-color: #f0f8ff;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Using CSS white-space: nowrap</h2>
<p class="no-wrap">This is a very long text which will not break into multiple lines regardless of the container width, forcing horizontal scrolling when necessary.</p>
</body>
</html>
The output displays the text on a single line with a light blue background −
Using CSS white-space: nowrap This is a very long text which will not break into multiple lines regardless of the container width, forcing horizontal scrolling when necessary. (single line, light blue background)
CSS white-space Values
The CSS white-space property offers several values for controlling text wrapping and whitespace handling −
| Value | Description |
|---|---|
| nowrap | Prevents line wrapping; text stays on single line |
| normal | Default behavior; text wraps normally |
| pre | Preserves whitespace and line breaks like <pre> tag |
| pre-wrap | Preserves whitespace but allows normal wrapping |
| pre-line | Collapses whitespace but preserves line breaks |
Example − Comparison of Different Approaches
Following example compares normal text wrapping with the no-wrap approach −
<!DOCTYPE html>
<html>
<head>
<title>Text Wrapping Comparison</title>
<style>
.container {
width: 300px;
border: 2px solid #333;
padding: 10px;
margin: 10px 0;
}
.nowrap {
white-space: nowrap;
background-color: #ffe6e6;
}
.normal {
background-color: #e6ffe6;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Normal Text Wrapping</h3>
<div class="container normal">
This text will wrap normally within the container boundaries when it exceeds the available width.
</div>
<h3>No Text Wrapping (white-space: nowrap)</h3>
<div class="container nowrap">
This text will not wrap and will extend beyond the container width, requiring horizontal scrolling.
</div>
</body>
</html>
The first container shows normal text wrapping (green background), while the second shows text extending beyond the container (red background) −
Normal Text Wrapping [Container with wrapped text - green background] No Text Wrapping (white-space: nowrap) [Container with overflowing text - red background, requires horizontal scroll]
Conclusion
While the <nobr> tag was used historically to prevent text wrapping, it is deprecated in HTML5. The modern and recommended approach is using CSS white-space: nowrap, which provides the same functionality while maintaining standards compliance and better semantic structure. Always use CSS for styling and layout control rather than deprecated HTML tags.
396 Views
