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 Disable Word Wrapping in HTML?
Word wrapping is the process of automatically moving text to the next line when it reaches the edge of its container. In HTML, text within an element wraps according to the boundaries of that element by default. However, there are situations where you may want to disable word wrapping to keep text on a single line or preserve specific formatting.
Default Word Wrapping Behavior
By default, HTML elements wrap text content when it exceeds the container's width. Let us see this behavior with an example
<!DOCTYPE html>
<html>
<head>
<title>Default Word Wrapping</title>
<style>
.container {
width: 150px;
background-color: lightblue;
border: 1px solid blue;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container">
This is a long sentence that will wrap to multiple lines because it exceeds the width of the container.
</div>
</body>
</html>
The text automatically wraps to fit within the 150px width container, creating multiple lines.
The CSS white-space Property
The CSS white-space property controls how whitespace and line breaks are handled within an element. This property is the primary tool for disabling word wrapping in HTML.
Syntax
white-space: normal | nowrap | pre | pre-line | pre-wrap;
The different values have the following behavior
normal Default behavior. Whitespace sequences collapse into a single space, and text wraps normally.
nowrap Whitespace sequences collapse, but text will not wrap to new lines unless explicitly broken with
<br>tags.pre Preserves all whitespace and line breaks exactly as written in the HTML. Text only wraps at explicit line breaks.
pre-line Collapses whitespace sequences but preserves line breaks. Text wraps at line breaks and when necessary.
pre-wrap Preserves all whitespace and line breaks, but also allows automatic wrapping when needed.
Using white-space: nowrap
The nowrap value is the most common way to disable word wrapping. It forces all text to remain on a single line, regardless of the container's width.
Example
Following example demonstrates how to disable word wrapping using white-space: nowrap
<!DOCTYPE html>
<html>
<head>
<title>Disable Word Wrapping with nowrap</title>
<style>
.normal-text {
width: 200px;
background-color: lightblue;
border: 1px solid blue;
padding: 10px;
margin: 10px;
}
.no-wrap-text {
width: 200px;
background-color: lightcoral;
border: 1px solid red;
padding: 10px;
margin: 10px;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h3>Normal Text Wrapping</h3>
<div class="normal-text">
This is a long sentence that will wrap to multiple lines in a normal container.
</div>
<h3>No Text Wrapping</h3>
<div class="no-wrap-text">
This is a long sentence that will not wrap to multiple lines due to nowrap.
</div>
</body>
</html>
The first div shows normal wrapping behavior, while the second div with white-space: nowrap keeps the text on a single line, potentially causing overflow.
Using white-space: pre
The pre value preserves all whitespace and line breaks exactly as they appear in the HTML source code. Text will not automatically wrap unless there are explicit line breaks in the code.
Example
Following example shows how white-space: pre preserves formatting and prevents automatic wrapping
<!DOCTYPE html>
<html>
<head>
<title>Disable Word Wrapping with pre</title>
<style>
.pre-formatted {
width: 300px;
background-color: aliceblue;
border: 1px solid navy;
padding: 15px;
margin: 10px;
white-space: pre;
font-family: monospace;
}
.normal-div {
width: 300px;
background-color: lightyellow;
border: 1px solid orange;
padding: 15px;
margin: 10px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h3>Normal Formatting</h3>
<div class="normal-div">Line 1 with extra spaces
Line 2 with a line break
Indented line</div>
<h3>Pre-formatted Text</h3>
<div class="pre-formatted">Line 1 with extra spaces
Line 2 with a line break
Indented line</div>
</body>
</html>
The pre value preserves the exact spacing and line breaks from the HTML source, while the normal div collapses whitespace and wraps text.
Handling Text Overflow
When disabling word wrapping, text may overflow beyond the container boundaries. You can control this behavior using the overflow property.
Example
Following example demonstrates different approaches to handle text overflow
<!DOCTYPE html>
<html>
<head>
<title>Handling Text Overflow</title>
<style>
.container {
width: 250px;
padding: 10px;
margin: 10px;
border: 2px solid #333;
white-space: nowrap;
}
.hidden { overflow: hidden; background-color: #ffe4e1; }
.scroll { overflow-x: auto; background-color: #e0ffff; }
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
background-color: #f0fff0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h3>Hidden Overflow</h3>
<div class="container hidden">
This text is too long for the container and will be hidden when it overflows.
</div>
<h3>Scrollable Overflow</h3>
<div class="container scroll">
This text is too long for the container but can be scrolled horizontally.
</div>
<h3>Ellipsis Overflow</h3>
<div class="container ellipsis">
This text is too long for the container and will show ellipsis at the end.
</div>
</body>
</html>
This example shows three different ways to handle overflowing text: hiding it, making it scrollable, or showing ellipsis (...) to indicate truncated content.
Comparison of Methods
Following table compares the different methods for disabling word wrapping
| Method | Whitespace Handling | Line Breaks | Best Use Case |
|---|---|---|---|
white-space: nowrap |
Collapses multiple spaces | Ignores line breaks | Single-line text, navigation menus |
white-space: pre |
Preserves all spaces | Preserves line breaks | Code blocks, preformatted text |
white-space: pre-wrap |
Preserves all spaces | Preserves breaks + auto-wrap | Poetry, formatted content |
Common Use Cases
Word wrapping is commonly disabled in the following scenarios
Navigation menus Keeping menu items on single lines
Code display Preserving code formatting and indentation
Table headers Preventing column headers from wrapping
Button text Ensuring button labels stay on one line
URLs and email addresses Keeping long addresses intact
Conclusion
To
2K+ Views
