Skip to content
Related Articles

Related Articles

HTML | DOM Style textAlignLast Property
  • Last Updated : 02 Aug, 2019

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:




    <!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:




    <!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
    • Internet Explorer 5.5
    • Firefox 49.0, 12.0 -moz-
    • Opera 34
    My Personal Notes arrow_drop_up
Recommended Articles
Page :