Open In App

CSS text-align-last Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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. 
  • right: It makes the last line of the paragraph right-aligned with respect to the container. 
  • center: It makes the last line center-aligned with respect to the container. 
  • 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. 
  • 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). 
  • 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). 
  • 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. 
  • initial: It makes the last line of the paragraph to be aligned as per its default value (left-aligned).
  • inherit: It makes the last line of the paragraph to be aligned, as per the text-align-last property of its parent element.

Example: In this example, we are using text-align-last: left; property.

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: 

Example: In this example, we are using text-align-last: right; property

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:

Example: In this example, we are using text-align-last: center; property.

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: 

Example: In this example, we are using text-align-last: justify; property.

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: 

Example: In this example, we are using text-align-last: start; property.

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: 

Example: In this example, we are using text-align-last: end; property.

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: 

Example: In this example, we are using text-align-last: auto; property.

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: 

Example: In this example, we are using text-align-last: initial; property

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: 

Supported Browsers: The browser supported by the 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


Last Updated : 05 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads