Skip to content
Related Articles

Related Articles

Improve Article
CSS | text-align-last Property
  • Last Updated : 09 Aug, 2019

The text-align-last property in CSS is used to set the last line of the paragraph just before the line break. The line break may be due to the 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:






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

    Output:

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

    Syntax:

    text-align-last: right;

    Example:




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

    Output:

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

    Syntax:

    text-align-last: center;

    Example:




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

    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:




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

    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:






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

    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:




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

    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:




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

    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:




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

    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
Recommended Articles
Page :