Skip to content
Related Articles

Related Articles

CSS | text-align-last Property

View Discussion
Improve Article
Save Article
  • Last Updated : 04 Aug, 2022

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;

Default Value : Its default value is auto.

Property Values:

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

Syntax:

text-align-last: left;

Example: 

HTML




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

html




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

html




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

html




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

html




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

html




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

html




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

html




<!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
  • Edge 12.0
  • Internet Explorer 5.5
  • Firefox 49.0
  • Opera 34.0
  • Safari 16.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!