CSS | text-align-last Property
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
Please Login to comment...