How to align the last (or only) line of text.
Syntax
text-align-last: alignment ;
auto - Align as per the value of text-align.
justify - Align along both the left and right content edges.
left - Align to the left edge of the line box.
right - Align to the right edge of the line box.
center - Center within the line box.
start - The same as left if direction is left-to-right and right if direction is right-to-left.
end - The same as right if direction is left-to-right and left if direction is right-to-left.
inherit - inherit from the parent element.
If applied to multiple paragraphs text-align-last will apply to the last line of each paragraph.
Text-align-last will also apply to a line right before a forced line break when text-align is "justify"
Examples:
h1 { text-align-last: center; }
.emw3class { text-align-last: justify; }
#emw3id { text-align-last: inherit; }
Try it:
This text should run over several lines having the effect that the last line might not perfectly fill the line creating a ragged last line of text. Opinions will vary but some consider this ugly. |
(CSS 3) Browser Support: IE 5.5+ and Firefox with the -moz- prefix. (start and end are not supported in IE.)
“An appeaser is one who feeds a crocodile - hoping it will eat him last” ~ Winston Churchill
Related:
text-align - Horizontal alignment of text.
text-transform - Change the capitalization of text.