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 break a line without using br tag in HTML / CSS?
To break a line without using br tag in HTML/CSS is useful when you want to create line breaks while preserving the semantic structure of your content. This approach gives you more control over text formatting without cluttering HTML with presentation tags.
Syntax
/* Method 1: Using white-space property */
selector {
white-space: pre;
}
/* Method 2: Using HTML pre tag */
<pre>text content</pre>
Method 1: Using white-space Property
The CSS white-space property controls how whitespace and line breaks are handled inside an element. Using white-space: pre preserves line breaks exactly as they appear in your HTML source code
<!DOCTYPE html>
<html>
<head>
<style>
.container {
white-space: pre;
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h3>Line Break Using white-space Property</h3>
<div class="container">First line
Second line
Third line</div>
</body>
</html>
A gray box with border containing three lines of text, each on a separate line: First line Second line Third line
Method 2: Using pre Tag
The HTML <pre> tag defines preformatted text that preserves both spaces and line breaks. It automatically applies white-space: pre styling
<!DOCTYPE html>
<html>
<head>
<style>
pre {
background-color: #e8f4f8;
padding: 15px;
border-left: 4px solid #007acc;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h3>Line Break Using pre Tag</h3>
<pre>First line
Second line
Indented third line</pre>
</body>
</html>
A light blue box with a blue left border displaying three lines:
First line
Second line
Indented third line
Key Differences
| Method | Use Case | Font Style |
|---|---|---|
white-space: pre |
Any element, maintains original font | Inherits from parent |
<pre> tag |
Preformatted content blocks | Monospace by default |
Conclusion
Both methods effectively break lines without using <br> tags. Use white-space: pre for more styling control, or <pre> tags for code blocks and preformatted content.
4K+ Views
