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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
05 Jul, 2023
Like Article
Save Article