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 prevent text from occupying more than one line in CSS?
In web development, controlling text layout is essential for creating readable and visually appealing content. Sometimes you need to prevent text from wrapping to multiple lines, especially in navigation menus, buttons, or table cells where single-line text is preferred.
Syntax
selector {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Understanding Text Overflow
Text overflow occurs when content exceeds its container's dimensions. By default, text wraps to new lines, but you can control this behavior using CSS properties.
Basic Overflow Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 50px;
border: 2px solid #333;
padding: 10px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will overflow the container and wrap to multiple lines by default.
</div>
</body>
</html>
A gray container with text wrapping to multiple lines, some text overflowing outside the container boundaries.
Method 1: Using white-space Property
The white-space property controls how whitespace and line breaks are handled within an element.
<!DOCTYPE html>
<html>
<head>
<style>
.nowrap {
width: 200px;
border: 2px solid #007bff;
padding: 10px;
white-space: nowrap;
background-color: #e7f3ff;
}
</style>
</head>
<body>
<div class="nowrap">
This text will not wrap to the next line and will overflow horizontally.
</div>
</body>
</html>
A blue-bordered container with text extending horizontally beyond the container width in a single line.
Method 2: Combining Properties for Clean Overflow
For a professional appearance, combine white-space, overflow, and text-overflow properties
<!DOCTYPE html>
<html>
<head>
<style>
.single-line {
width: 250px;
border: 2px solid #28a745;
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #d4edda;
margin: 10px 0;
}
.comparison {
width: 250px;
border: 2px solid #dc3545;
padding: 10px;
background-color: #f8d7da;
}
</style>
</head>
<body>
<h3>With Single Line Control:</h3>
<div class="single-line">
This very long text demonstrates how to prevent wrapping with ellipsis.
</div>
<h3>Without Control (Default):</h3>
<div class="comparison">
This very long text demonstrates how text wraps naturally without any controls.
</div>
</body>
</html>
Two containers: the first shows text truncated with "..." ellipsis on a single line, the second shows text naturally wrapping to multiple lines.
Key CSS Properties
| Property | Value | Effect |
|---|---|---|
white-space |
nowrap |
Prevents text wrapping |
overflow |
hidden |
Hides overflowing content |
text-overflow |
ellipsis |
Shows "..." for hidden text |
Conclusion
To prevent text from occupying more than one line, use white-space: nowrap combined with overflow: hidden and text-overflow: ellipsis. This creates clean, single-line text with professional ellipsis indicators for truncated content.
3K+ Views
