Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 a text in JavaScript.
To handle tabs, line breaks, and whitespace in text in JavaScript, we can use the whiteSpace property. This property has seven attributes −
- normal
- nowrap
- pre
- pre-line
- pre-wrap
- initial
- inherit
Generally, in HTML we use the entity for multiple spaces and the <br/> tag to get line break. But in JavaScript, we use different attribute properties (mainly the normal and pre) of white-space properties to handle the tabs, line breaks, and multiple whitespaces. The details of these two properties are −
normal − It is the default attribute of whiteSpace. Here more than one white space will be considered as one. And the text will wrap when required.
pre − Here we can use multiple spaces or tabs. Those will be preserved by the browser. And the texts will be wrapped when the user breaks the line inside the text.
Handle Tabs Using the white-space value to “pre”
In JavaScript, the “pre” value of style.whiteSpace property is useful for the text if the user wants to use multiple spaces or tabs in a text. Here the multiple white spaces or tabs will preserve in the browser. This attribute value acts as a pre tag of HTML.
To use this property firstly we get access to the DOM element by using the id of the element passing through the document.getElementById() method. Then set the attribute of the style.whiteSpace property “pre” to arrange the text. We can also writethe “pre-wrap” attribute instead of “pre” for the same usage. The syntax will also remain the same.
Syntax
Following is the syntax to handle the tabs or multiple spaces of the text of an element of a DOM using style.whiteSpace −
document.getElementById('element').style.whiteSpace = 'pre';
In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById method we are getting the element object and setting the style.whiteSpace property to “pre”.
Example
In the below example, we are handling tabs using style.whiteSpace value to “pre”. We have used a button-click event for this purpose.
<html> <body> <h3>Handle Tabs Using the white-space value to <i>"pre"</i></h3> <button onclick="handleTabs()">Handle Tabs</button> <div id="element" style="border: 1px solid black;">Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint.</div> <script> function handleTabs(){ document.getElementById('element').style.whiteSpace = 'pre' } </script> </body> </html>
In the above output, users can see after the button click we have set the style.whiteSpace value to “pre” so now the tabs are handled properly.
Handle Line breaks Using the white-space value to “pre”
In JavaScript, the pre attribute of style.whiteSpace property is useful for the text if the user wants to break the text into multiple lines. Here the text will wrap when the user puts the line break using enter button. This attribute acts as a pre tag of HTML.
To use this property firstly we get access to the DOM element by using the id of the element passing through the document.getElementById() method. Then set the attribute of the style.whiteSpace property “pre” to arrange the text. We can also write the “pre-wrap” or “pre-line” attribute instead of “pre” for the same usage. The syntax will also remain the same.
Users can follow the below syntax to handle the line breaks of the text of an element of a DOM using style.whiteSpace −
Syntax
document.getElementById('element').style.whiteSpace = 'pre'
In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById method we are getting the element object and setting the style.whiteSpace property to “pre”.
Example
In the below example, we are handling line breaks using style.whiteSpace value to “pre”. We have used a button-click event for this purpose.
<html> <body> <h4> Handle Line breaks Using the white-space value to <i> "pre" </i> </h4> <button onclick = "handleLineBreaks()"> Handle Line breaks </button> <div id="element" style="border: 1px solid black;"> Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. </div> <script> function handleLineBreaks(){ document.getElementById('element').style.whiteSpace = 'pre' } </script> </body> </html>
In the above output, users can see after the button click we have set the style.whiteSpace value to “pre” so now the line breaks are handled properly.
Handle White Space Using the white-space value to “normal”
In JavaScript, the normal value of the style.whiteSpace property is useful for normal text. That means when there will exist only single white spaces. Here if users want to put multiple white spaces those will collapse into a single one. Here the break of the line happens when it is necessary.
To use this property firstly we get access to the DOM element by using the id of the element passing through the document.getElementById() method. Then set the style.whiteSpace property to “normal” to arrange the text. This is the default attribute of the white-space property.
Users can follow the below syntax to wrap the text of an element using style.whiteSpace set to “normal” −
Syntax
document.getElementById('element').style.whiteSpace = 'normal'
In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById method we are getting the element object and setting the style.whiteSpace property to “normal”.
Example
In the below example, we are handling white spaces using style.whiteSpace value to “normal”. We have used a button-click event for this purpose.
<html> <body> <h4>Handle White Spaces Using the white-space value to <i>"normal"</i></h4> <button onclick = "handleWhiteSpaces()"> Handle White Spaces </button> <div id="element" style="border: 1px solid black; white-space: pre;"> Welcome to Tutorialspoint. Welcome to Tutorialspoint. Welcome to Tutorialspoint. </div> <script> function handleWhiteSpaces(){ document.getElementById('element').style.whiteSpace = 'normal' } </script> </body> </html>
In the above output, users can see after the button click we have set the style.whiteSpace value to “normal” so now the white spaces are handled properly.
1K+ Views
