HTML - DOM Style Object textIndent Property

Quiz

HTML DOM Style Object textIndent property is used for setting or returning the indentation of the first line of text. It also accepts negative value where first line will be indented to the left.

Syntax

Set the textIndent property:

object.style.textIndent= "length | percentage | initial | inherit";

Get the textIndent property:

object.style.textIndent;

Property Values

Value	Description
length	It specifies indentation in length units. It's default value is 0.
percentage	It specifies indentation value in percentage of width of the parent element.
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 indentation of first line of text in element.

Examples of HTML DOM Style Object 'textIndent' Property

The following examples illustrates text indentation property applied to a div element.

Set Text indentation Using 'length' and 'percentage'

The following example sets a indentation to div element using length and percentage value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textIndent Property
    </title>
    <style>
        div {
            width: 250px;
        }
    </style>
</head>
<body>
    <p>
        Click to change text indentation.
    </p>
    <button onclick="fun()">Length</button>
    <button onclick="funTwo()">Percentage</button>
    <div id="indent">
        <p>
            JavaScript is a lightweight, interpreted
            programming language. It is commonly used
            to create dynamic and interactive elements
            in web applications.
        </p>
        <p>
            JavaScript is very easy
            to implement because it is integrated with
            HTML. It is open and cross-platform.
        </p>
        <p>
            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.
        </p>
        <p>
            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>
    </div>
    <script>
        function fun() {
            document.getElementById("indent")
                .style.textIndent = "40px";
        }
        function funTwo() {
            document.getElementById("indent")
                .style.textIndent = "5%";
        }
    </script>
</body>
</html>

Set Text indentation Using Negative Value

The following example sets a negative indentation to div element which indent the text to left side.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textIndent Property
    </title>
    <style>
        div {
            width: 250px;
        }
    </style>
</head>
<body>
    <p>
        Click to change text indentation.
    </p>
    <button onclick="fun()">Change</button>
    <div id="indent">
        <p>
            JavaScript is a lightweight, interpreted
            programming language. It is commonly used
            to create dynamic and interactive elements
            in web applications.
        </p>
        <p>
            JavaScript is very easy
            to implement because it is integrated with
            HTML. It is open and cross-platform.
        </p>
        <p>
            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.
        </p>
        <p>
            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>
    </div>
    <script>
        function fun() {
            document.getElementById("indent")
                .style.textIndent = "-40px";
        }
    </script>
</body>
</html>

Supported Browsers

Property
textIndent	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page