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
How to set how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" with JavaScript?
The textAlignLast property in JavaScript controls how the last line of a text block is aligned when the text uses text-align: justify. This is particularly useful for controlling the alignment of the final line in justified paragraphs.
Syntax
element.style.textAlignLast = "value";
Common Values
The textAlignLast property accepts these values:
-
auto- Default behavior (usually left-aligned) -
left- Aligns last line to the left -
right- Aligns last line to the right -
center- Centers the last line -
justify- Justifies the last line (stretches it)
Example: Setting Last Line Alignment
<!DOCTYPE html>
<html>
<head>
<style>
#myText {
text-align: justify;
width: 300px;
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<div id="myText">
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.
This is demo text. This is demo text. This is demo text. This is demo text.
Notice how the last line changes alignment.
</div>
<button onclick="setAlignment('left')">Left</button>
<button onclick="setAlignment('right')">Right</button>
<button onclick="setAlignment('center')">Center</button>
<button onclick="setAlignment('justify')">Justify</button>
<script>
function setAlignment(alignment) {
const element = document.getElementById("myText");
element.style.textAlignLast = alignment;
console.log("Last line alignment set to: " + alignment);
}
</script>
</body>
</html>
Getting Current textAlignLast Value
<script>
const element = document.getElementById("myText");
// Get current value
const currentAlignment = element.style.textAlignLast;
console.log("Current textAlignLast:", currentAlignment);
// Get computed style (more reliable)
const computedStyle = window.getComputedStyle(element);
console.log("Computed textAlignLast:", computedStyle.textAlignLast);
</script>
Browser Compatibility
| Property | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
textAlignLast |
47+ | 49+ | 16+ | 12+ |
Key Points
- Only affects the last line of text blocks with
text-align: justify - Does not apply to single-line text
- The
justifyvalue fortextAlignLastcan create wide spacing in short last lines - Use
getComputedStyle()to reliably read the current value
Conclusion
The textAlignLast property provides fine control over last-line alignment in justified text. Use it to improve the visual appearance of text blocks by controlling how the final line is positioned.
Updated on: 2026-03-15T23:18:59+05:30
428 Views
Advertisements