text-align-last CSS property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.
The text-align-last CSS property sets how the last line of a block or a line, right before a forced line break, is aligned.
Try it
text-align-last: right;
text-align-last: center;
text-align-last: left;
<section id="default-example">
<div>
<p id="example-element">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
</section>
section {
font-size: 1.5em;
}
#default-example > div {
width: 250px;
}
#example-element {
text-align: justify;
}
Syntax
css
/* Keyword values */
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
/* Global values */
text-align-last: inherit;
text-align-last: initial;
text-align-last: revert;
text-align-last: revert-layer;
text-align-last: unset;
Values
auto-
The affected line is aligned per the value of
text-align, unlesstext-alignisjustify, in which case the effect is the same as settingtext-align-lasttostart. start-
The same as
leftif direction is left-to-right andrightif direction is right-to-left. end-
The same as
rightif direction is left-to-right andleftif direction is right-to-left. left-
The inline contents are aligned to the left edge of the line box.
right-
The inline contents are aligned to the right edge of the line box.
center-
The inline contents are centered within the line box.
justify-
The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.
Formal definition
| Initial value | auto |
|---|---|
| Applies to | block containers |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
text-align-last =
auto |
start |
end |
left |
right |
center |
justify |
match-parent
Examples
Justifying the last line
CSS
css
p {
font-size: 1.4em;
text-align: justify;
text-align-last: center;
}
Results
Specifications
| Specification |
|---|
| CSS Text Module Level 3 # text-align-last-property |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-align-last
|
|
|
|
|
|
|
|
|
|
|
|
|
auto
|
|
|
|
|
|
|
|
|
|
|
|
|
center
|
|
|
|
|
|
|
|
|
|
|
|
|
end
|
|
|
|
|
|
|
|
|
|
|
|
|
justify
|
|
|
|
|
|
|
|
|
|
|
|
|
left
|
|
|
|
|
|
|
|
|
|
|
|
|
match-parent
|
|
|
|
|
|
|
|
|
|
|
|
|
right
|
|
|
|
|
|
|
|
|
|
|
|
|
start
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.