HTML - DOM Style Object textAlignLast Property

Quiz

HTML DOM Style Object textAlignLast property sets or returns the alignment of last line of text.

Syntax

Set the textAlignLast property:

object.style.textAlignLast= "auto | left | right | center | justify | start | end | initial | inherit";

Get the textAlignLast property:

object.style.textAlignLast;

Property Values

Value	Description
auto	It is the default value in which last line is justified and aligned to left side.
left	It aligns the text of last line to left side.
right	It aligns the text of last line to right side.
center	It aligns the text of last line to center.
justify	The last line is justified by inserting the blank space to occupy the entire width.
start	It aligns the text of last line at the begining of line that is, left if text direction is ltr(left-to-right) and it is right aligned if text direction is rtl(right-to-left).
end	It aligns the text of last line to the end of line that is, right if text direction is ltr(left-to-right) and it is left aligned if text direction is rtl(right-to-left).
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 text align last property of an element.

Examples of HTML DOM Style Object 'textAlignLast' Property

The following examples sets the text alignment of last line when direction is ltr(left-to-right) and rtl(right-to-left).

Set Last Line Text Alignment

The following example sets the text alignment of last line to right, center,justify and end when direction is ltr(left-to-right).

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textAlignLast Property
    </title>
    <style>
        #align {
            border: 1px solid #04af2f;
            text-align: justify;
        }
    </style>
</head>
<body>
    <p>Click to change last line text alignment.</p>
    <button onclick="fun()">Right Align</button>
    <button onclick="funTwo()">Center Align</button>
    <button onclick="funThree()">Justify Align</button>
    <button onclick="funFour()">End</button>
    <div id="align">
        <p>
            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>
    </div>
    <script>
        function fun() {
            document.getElementById("align")
                .style.textAlignLast = "right"
        }
        function funTwo() {
            document.getElementById("align")
                .style.textAlignLast = "center"
        }
        function funThree() {
            document.getElementById("align")
                .style.textAlignLast = "justify"
        }  
        function funFour() {
            document.getElementById("align")
                .style.textAlignLast = "end"
        }      
    </script>
</body>
</html>

Set Last Line Text Alignment

The following example sets the text alignment of last line to start, and justify when direction is trl(right-to-left).

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textAlignLast Property
    </title>
    <style>
        #align {
            border: 1px solid #04af2f;
            text-align: justify;
            direction: rtl;
        }
    </style>
</head>
<body>
    <p>Click to change last line text alignment.</p>
    <button onclick="funThree()">Justify Align</button>
    <button onclick="funFour()">Start</button>
    <div id="align">
        <p>
            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>
    </div>
    <script>
        function funThree() {
            document.getElementById("align")
                .style.textAlignLast = "justify"
        }  
        function funFour() {
            document.getElementById("align")
                .style.textAlignLast = "start"
        }      
    </script>
</body>
</html>

Supported Browsers

Property
textAlignLast	Yes 47	Yes 12	Yes 49	Yes 16	Yes 34

html_dom.htm

Print Page