CSS | text-align-last Property

The text-align-last property in CSS is used to set the last line of paragraph just before the line break. The line break may be due to natural ending of a paragraph, or it may be due to the use of <br> tag. The text-align-last property sets the alignment of all the last lines occurring in the element in which the text-align-last property is applied. For example, if the text-align-last property is applied to the <p> element then, all the last lines of the <p> element will be affected by the text-align-last property.

Syntax:

text-align-last: auto|start|end|left|right|center|justify|initial|inherit;

Property Values:

  • left: It makes the last line of the paragraph left-aligned with respect to the container.

    Syntax:

    text-align-last: left;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: left;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: left;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • right: It makes the last line of the paragraph right-aligned with respect to the container.

    Syntax:

    text-align-last: right;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: right;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: right;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • center: It makes the last line center-aligned with respect to the container.

    Syntax:

    text-align-last: center;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: center;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: center;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • justify: It makes the last line justified, i.e., the last line will occupy the entire width of the container, extra space is inserted between the words to achieve this property.

    Syntax:

    text-align-last: justify;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: justify;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: justify;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • start: It makes the last line left-aligned, if the direction of text is left-to-right (LTR) and it makes the last line right-aligned, if the direction of text is right-to-left (RTL).

    Syntax:

    text-align-last: start;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: start;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: start;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • end: It makes the last line right-aligned, if the direction of text is left-to-right (LTR) and it makes the last line left-aligned, if the direction of text is right-to-left (RTL).

    Syntax:

    text-align-last: end;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: end;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: end;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • auto: It makes the last line of the paragraph to be aligned as per text-align property of the container when the text-align property is not set to justify.

    Syntax:

    text-align-last: auto;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: auto;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: auto;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • initial: It makes the last line of the paragraph to be aligned as per its default value (left-aligned).

    Syntax:

    text-align-last: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: initial;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: initial;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • inherit: It makes the last line of the paragraph to be aligned, as per text-align-last property of its parent element.

Supported Browsers: The browser supported by text-align-last property are listed below:

  • Google Chrome 47.0
  • Internet Explorer 5.5
  • Firefox 49.0, 12.0 -moz-
  • Opera 34.0


My Personal Notes arrow_drop_up

Student, BCA

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.