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 Render an HTML String Preserving Spaces and Line Breaks?
When creating HTML content, you may need to preserve multiple spaces, tabs, and line breaks exactly as they appear in your source code. By default, HTML collapses multiple whitespace characters into a single space and ignores line breaks. The <p> and <div> tags will not display extra spaces or line breaks as written in your HTML file.
This article demonstrates two effective methods to render HTML strings while preserving all original spacing and line breaks.
Method Overview
Using the HTML <pre> Tag
The <pre> (preformatted) tag preserves both spaces and line breaks exactly as they appear in the HTML source code. Text inside a <pre> element is displayed in a monospace font, and all whitespace characters including spaces, tabs, and newlines are preserved.
Syntax
<pre> Your text with multiple spaces and line breaks will be preserved exactly. </pre>
Example
<!DOCTYPE html>
<html>
<head>
<title>Pre Tag Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>HTML String Preserving Spaces and Line Breaks</h3>
<pre>
Hello world!
Welcome to TutorialsPoint.
Today we are learning about preserving
spaces and line
breaks in HTML.
</pre>
</body>
</html>
The output displays the text exactly as formatted in the source code, with all indentation and spacing preserved
Hello world!
Welcome to TutorialsPoint.
Today we are learning about preserving
spaces and line
breaks in HTML.
Using the CSS white-space Property
The CSS white-space property controls how whitespace inside an element is handled. By setting white-space: pre-wrap, you can preserve spaces and line breaks while allowing text to wrap at container boundaries. This method works with any HTML element including <p>, <div>, and <span> tags.
Syntax
white-space: pre-wrap;
Example Using white-space with Div
<!DOCTYPE html>
<html>
<head>
<title>White-space Property Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>HTML String Preserving Spaces and Line Breaks</h3>
<div style="white-space: pre-wrap;">
Hello World!
Welcome to TutorialsPoint.
Today we are learning about preserving
spaces and line
breaks in HTML.
</div>
</body>
</html>
The output preserves the original formatting while using the default font family
Hello World!
Welcome to TutorialsPoint.
Today we are learning about preserving
spaces and line
breaks in HTML.
Example Using white-space with Paragraph
The CSS white-space property can be applied to paragraph elements as well
<!DOCTYPE html>
<html>
<head>
<title>White-space with Paragraph</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Formatted Code Example</h3>
<p style="white-space: pre-wrap; background-color: #f4f4f4; padding: 10px; border-left: 3px solid #007acc;">
function greetUser(name) {
if (name) {
console.log("Hello, " + name + "!");
} else {
console.log("Hello, Guest!");
}
}
</p>
</body>
</html>
This displays formatted code with preserved indentation inside a styled paragraph element.
Comparison of Methods
| Method | Font | Flexibility | Text Wrapping | Best Use Case |
|---|---|---|---|---|
<pre> tag |
Monospace (fixed-width) | Limited styling options | No wrapping by default | Code snippets, ASCII art, fixed formatting |
white-space: pre-wrap |
Any font family | Full CSS styling control | Wraps at container boundaries | Formatted text with flexible styling |
Additional white-space Values
The CSS white-space property offers several other values for different formatting needs
normal Default behavior that collapses whitespace and wraps text.
pre Behaves like the
<pre>tag, preserving all whitespace without wrapping.pre-wrap Preserves whitespace and allows text wrapping.
nowrap Collapses whitespace but prevents text wrapping.
pre-line Preserves line breaks but collapses other whitespace.
Conclusion
To preserve spaces and line breaks in HTML, use the <pre> tag for simple code formatting with monospace fonts, or apply white-space: pre-wrap CSS for more flexible styling while maintaining the original text formatting. The CSS approach offers greater design control and works with any HTML element.
425 Views
