Javascript DOM CSS Style textAlignLast Property

Introduction

Align the last line of a paragraph to the right:

document.getElementById("myDIV").style.textAlignLast = "right";

Click the button to change the text-align-last property of the DIV element.

The textAlignLast property is not supported in Firefox, however, an alternative is supported: the MozTextAlignLast property.

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*from www.  j av a 2 s  . c o m*/
  text-align: justify;
}
</style>
</head>
<body>

<div id="myDIV">
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
</div>
<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  document.getElementById("myDIV").style.MozTextAlignLast = "right"; // Code for Firefox
  document.getElementById("myDIV").style.textAlignLast = "right";  // Standard Syntax
}
</script>
</body>
</html>

The textAlignLast property specifies how to align the last line of a text.

The textAlignLast property will only work for elements with the text-align property set to "justify".

Property Values

Value	Description
auto	`Default`. The last line is justified and aligned left
left	The last line is aligned to the left
right	The last line is aligned to the right
center	The last line is center-aligned
justify	The last line is justified as the rest of the lines
start	The last line is aligned at the beginning of the line
end	The last line is aligned at the end of the line
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The textAlignLast property returns a String representing the text-align-last property of an element.

Previous Next