Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Align the last line of the text with CSS
The text-align-last property in CSS is used to align the last line of a text block. This property is particularly useful when you want the final line of a paragraph to have different alignment than the rest of the text.
Syntax
selector {
text-align-last: value;
}
Possible Values
| Value | Description |
|---|---|
left |
Aligns the last line to the left |
right |
Aligns the last line to the right |
center |
Centers the last line |
justify |
Justifies the last line |
auto |
Default value, follows text-align property |
Example: Aligning Last Line to Right
The following example demonstrates how to align the last line of text to the right −
<!DOCTYPE html>
<html>
<head>
<style>
.mydiv {
width: 400px;
text-align: justify;
text-align-last: right;
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<h1>text-align-last Property</h1>
<div class="mydiv">
<p>This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. Final line here.</p>
</div>
</body>
</html>
A justified paragraph appears with the last line aligned to the right, creating a visual contrast between the justified body text and right-aligned final line.
Example: Centering the Last Line
This example shows how to center the last line of text −
<!DOCTYPE html>
<html>
<head>
<style>
.center-last {
width: 350px;
text-align: left;
text-align-last: center;
border: 2px solid #333;
padding: 15px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="center-last">
<p>Welcome to our website. We provide quality tutorials and examples.
Learn web development with us. Thank you for visiting!</p>
</div>
</body>
</html>
A left-aligned paragraph with the last line "Thank you for visiting!" centered, creating an elegant finishing touch to the text block.
Conclusion
The text-align-last property provides fine control over the alignment of the final line in text blocks. It's commonly used in justified text to prevent awkward spacing on short last lines.
Updated on: 2026-03-15T12:04:56+05:30
398 Views
Advertisements