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 handle tabs, line breaks and whitespace in a text in JavaScript?
In this tutorial, we will learn how to handle tabs, line breaks, and whitespace in text using JavaScript's CSS white-space property.
JavaScript provides control over text formatting through the style.whiteSpace property. This property has several values that determine how whitespace is handled:
- normal - Default value; collapses multiple spaces into one, wraps text automatically
- pre - Preserves spaces and tabs, respects line breaks
- pre-wrap - Like 'pre' but also wraps long lines
- pre-line - Preserves line breaks but collapses spaces
- nowrap - Prevents line wrapping
- initial - Sets to default value
- inherit - Inherits from parent element
Understanding White-Space Values
The most commonly used values are normal and pre:
normal - Collapses multiple whitespace characters into single spaces and wraps text when needed.
pre - Preserves all whitespace including spaces, tabs, and line breaks. Text only wraps at explicit line breaks.
Syntax
document.getElementById('elementId').style.whiteSpace = 'value';
Using "pre" to Handle Tabs and Spaces
The "pre" value preserves multiple spaces and tabs, making it useful when you need to maintain exact spacing in text.
<html>
<body>
<h3>Handle Tabs Using white-space: pre</h3>
<button onclick="handleTabs()">Apply Pre Formatting</button>
<div id="tabElement" style="border: 1px solid black;">
Text with multiple spaces and tabs
</div>
<script>
function handleTabs() {
document.getElementById('tabElement').style.whiteSpace = 'pre';
}
</script>
</body>
</html>
Using "pre" to Handle Line Breaks
The "pre" value also preserves line breaks, displaying text exactly as formatted in the source.
<html>
<body>
<h3>Handle Line Breaks Using white-space: pre</h3>
<button onclick="handleLineBreaks()">Apply Pre Formatting</button>
<div id="lineElement" style="border: 1px solid black;">
First line of text
Second line of text
Third line of text
</div>
<script>
function handleLineBreaks() {
document.getElementById('lineElement').style.whiteSpace = 'pre';
}
</script>
</body>
</html>
Using "normal" to Normalize Whitespace
The "normal" value collapses multiple spaces into single spaces and enables automatic text wrapping.
<html>
<body>
<h3>Handle White Spaces Using white-space: normal</h3>
<button onclick="handleWhiteSpaces()">Apply Normal Formatting</button>
<div id="spaceElement" style="border: 1px solid black; white-space: pre;">
Text with multiple spaces that will be normalized
</div>
<script>
function handleWhiteSpaces() {
document.getElementById('spaceElement').style.whiteSpace = 'normal';
}
</script>
</body>
</html>
Comparison of White-Space Values
| Value | Preserves Spaces | Preserves Line Breaks | Text Wrapping |
|---|---|---|---|
| normal | No | No | Yes |
| pre | Yes | Yes | Only at line breaks |
| pre-wrap | Yes | Yes | Yes |
| pre-line | No | Yes | Yes |
Conclusion
JavaScript's style.whiteSpace property provides flexible control over text formatting. Use "pre" to preserve exact spacing and line breaks, and "normal" for standard text flow with collapsed whitespace.
2K+ Views
