CSS text-align-last

The CSS text-align-last property describes how the last line of a block element is aligned in the case where the text-align property is set to justify. It accepts roughly the same values text-align does.

text-align-last was not supported by Chrome at the time of writing. Check Mozilla Developer Network compatibility tables for more.

text-align-last: auto|left|right|center|justify|start|end
text-align-last: right;
text-align-last: end;     /* right for LTR, left for RTL languages */

Same as in text-align, the start value means left in left to right languages and right in right to left languages and end is just the opposite. By default, the last line of a justified paragraph is start aligned. In the case where the element has a single line of text, text-align-last takes precedence over text-align.

Browser Support: Firefox and IE only. See text-align-last in Mozilla Developer Network for more support information.

text-align-last Example

Use text-align-last after its vendor prefixes (-moz at the time of writing) for the best support:

p.last-right {
text-align: justify; -moz-text-align-last: right; text-align-last: right;
}

This paragraphs are justified but their last lines are right aligned.

Will not work on Chrome and other browsers until the property is implemented.

Newlines and <br> tags

text-align-last also affects lines before a forced line break (eg. newline character or <br>):

p.last-right {
text-align: justify; -moz-text-align-last: right; text-align-last: right;
}
<p class="last-right" >
There's a break here:<br>
So we are both right aligned.
</p>

There's a break here:
So we are both right aligned.

Justifying the last line?

Justifying the last line in body text is not a good idea unless one has some sort of control over the line length.

this is why.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>