Aquileo | HTML | DOM Style textAlignLast Property

The Style textAlignLast property in HTML DOM is used to set the alignment of the last line of the text. Syntax:

Return the textAlignLast property:
```
object.style.textAlignLast
```

Set the textAlignLast property:

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

Property Values:

Auto: The last line is justified and left aligned in the container.
Left: The last line of the text is left aligned.
Right: The last line of the text is right aligned.
Center: The last line of the text is center-aligned.
Justify: The last line is justified(last line occupies entire width of container by inserting extra spaces between the words).
Start: The last line of the text is left aligned(if direction of text is left-to-right) and right aligned(if direction of text is right-to-left).
End: The last line of the text is right aligned(if direction of text is left-to-right) and left aligned(if direction of text is right-to-left).
Initial: Sets the last line to align by its initial value.
Inherit: The last line inherits its property from parent element.

Example 1:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML | DOM Style textAlignLast Property
    </title>
    <style>
        .right {
            text-align-last: right;
            border: 2px solid grey;
        }
        
        .center {
            text-align-last: center;
            border: 2px solid black;
        }
    </style>
</head>

<body>

    <h2 style="text-align:center">
       Text-align-last-Right:
   </h2>
    <div class="right">
        <!-- text-align-last: right; property -->
        <p>
            <font color="green">
                GeeksForGeek
           A Computer Science Portal for Geeks
      </font>
        </p>
    </div>

    <h2 style="text-align:center">
       Text-align-last-Center:
   </h2>
    <div class="center">
        <!-- text-align-last: center; property -->
        <p>
            <font color="green">
                GeeksForGeek
         A Computer Science Portal for Geeks
      </font>
        </p>
    </div>
</body>

</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML | DOM Style textAlignLast Property
    </title>
    <style>
        .justify {
            text-align-last: justify;
            border: 2px solid grey;
        }
        
        .start {
            text-align-last: start;
            border: 2px solid Green;
        }
    </style>
</head>

<body>

    <h2 style="text-align:center">
       Text-align-last-Justify:
   </h2>
    <div class="justify">
        <!-- text-align-last: justify; property -->
        <p>
            <font color="green">
                GeeksForGeek
        A Computer Science Portal for Geeks
      </font>
        </p>
    </div>

    <h2 style="text-align:center">
       Text-align-last-Start:
   </h2>
    <div class="start">
        <!-- text-align-last: start; property -->
        <p>
            <font color="green">
                GeeksForGeek
        A Computer Science Portal for Geeks
      </font>
        </p>

    </div>
</body>

</html>

Output:

Supported Browsers: The browser supported by HTML | DOM Style textAlignLast Property are listed be;ow:

Google Chrome 47
Edge 12
Internet Explorer 5.5
Firefox 49.0
Opera 34
Safari 16

HTML | DOM Style textAlignLast Property

Explore