HTML - DOM Style Object whiteSpace Property

Quiz

HTML DOM Style Object whiteSpace property sets or returns the way how whitespaces are being handled in a text.

Syntax

Set the whiteSpace property:

object.style.whiteSpace= "normal | nowrap | pre | pre-line | pre-wrap | initial | inherit";

Get the whiteSpace property:

object.style.whiteSpace;

Property Values

Value	Description
normal	It is the default value which collapse the whitespace into single whitespace and wrap the text if required.
nowrap	It collapse the whitespace into single whitespace and text will never wrap to the next line. The text will only change line when a br element is used.
pre	It preserves the Sequences of white spaces. Text wrap occurs on line breaks or if br element is used.
pre-line	It collapses whitespaces to single whitespace and wrap text on line brakes, or when br element is used or when required.
pre-wrap	It preserved the white spaces and text will wrap at new line characters, if br element is used or required.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents the white Space property for an element.

Example of HTML DOM Style Object 'whiteSpace' Property

The following example illustrates different property value of whiteSpace property applied on a p element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object whiteSpace Property
    </title>
</head>
<body>
    <p>
        Click to set whiteSpace property.
    </p>
    <button onclick="funTwo()">NoWrap</button>
    <button onclick="funThree()">Pre</button>
    <button onclick="funFour()">Pre-In</button>
    <button onclick="funFive()">Pre-Wrap</button>
    <br><br>
    <p id="wspace">
        JavaScript is a lightweight, interpreted 
        programming language. It is commonly used 
        to create dynamic and interactive elements 
        in web applications. JavaScript is very easy 
        to implement because it is integrated with 
        HTML. It is open and cross-platform.
        This JavaScript tutorial has been designed 
        for beginners as well as working professionals 
        to help them understand the basic to advanced 
        concepts and functionalities of JavaScript. It 
        covers most of the important concepts related to 
        JavaScript such as operators, control flow, 
        functions, objects, OOPs, Asynchronous JavaScript, 
        Events, DOM manipulation and much more.
    </p>
    <script>
        function funTwo() {
            document.getElementById("wspace")
                .style.whiteSpace = "nowrap";
        }
        function funThree() {
            document.getElementById("wspace")
                .style.whiteSpace = "pre";
        }
        function funFour() {
            document.getElementById("wspace")
                .style.whiteSpace = "pre-line";
        }
        function funFive() {
            document.getElementById("wspace")
                .style.whiteSpace = "pre-wrap";
        }
    </script>
</body>
</html>

Supported Browsers

Property
whiteSpace	Yes 1	Yes 12	Yes 1	Yes 1	Yes 4

html_dom.htm

Print Page