CSS Portal

CSS text-align-last Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The text-align-last property controls how the final line of a block-level element is positioned along the inline axis when that final line would otherwise be treated differently from the rest of the lines (for example, when a paragraph is justified or when a forced break ends the line). It lets authors make the last line visually distinct from the rest of the paragraph so that short endings, headings, or lines before manual breaks do not appear awkward compared with the body alignment. This is especially useful when most lines are stretched or distributed by justification but the last line should retain a conventional alignment for readability and aesthetics.

In practical layout work, text-align-last works together with the block’s general alignment behavior: it only changes the decision for that last line while the remainder of the element continues to follow the main alignment setting. See text-align for the overall alignment rules that this property can selectively override for the final line. It also interacts with justification mechanics and spacing rules, so it is commonly used whenever a paragraph has been set to distribute space between words and the designer wants a different treatment for the paragraph’s terminal line; consult text-justify for how justification spacing is normally handled.

Writing direction and the inline axis orientation affect how the property behaves: when the page or element uses a different axis orientation, the visual placement of the last line follows that axis. For work with vertical or rotated text flows, consider the implications of writing-mode, and for right-to-left languages remember that start/end semantics can be reversed via direction. Because those upstream properties change what “start”, “end”, and the inline axis mean, the effect of the final-line alignment will change accordingly.

Finally, text-align-last is a typographic tool for refinements rather than bulk layout—use it to improve the appearance of the last line in paragraphs, headings, or labels without altering the overall flow. It should be considered along with line-level formatting such as indentation and wrapping; interactions with things like initial indents are relevant, so review related behavior in text-indent. In fragmented contexts (columns, paged media, or other block fragmentation) it is typically applied per fragment’s last line, so test cases where content is split across columns or pages to ensure the visual result meets design intent.

Definition

Initial value
auto
Applies to
Block containers
Inherited
Yes
Computed value
Specified value
Animatable
No
JavaScript syntax
object.style.textAlignLast

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

text-align-last: auto | start | end | left | right | center | justify

Values

  • autoText is aligned like the other lines in the object, using the value of the text-align property.
  • startThe same as left if direction is left-to-right and right if direction is right-to-left.
  • endThe same as right if direction is left-to-right and left if direction is right-to-left.
  • leftText is aligned to the left.
  • rightText is aligned to the right.
  • centerThe text is centered within the line box.
  • justifyThe text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.

Example

<div class='example'>
<h2>text-align-last demonstration</h2>
<p class='label'>Each paragraph uses text-align: justify; only the last line alignment is changed via text-align-last.</p>

<p class='box justify last-left'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>

<p class='box justify last-center'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>

<p class='box justify last-right'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>

<p class='box justify last-justify'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
</div>
.example {
  max-width: 640px;
  margin: 24px auto;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #222;
}

h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.label {
  margin-bottom: 12px;
  font-size: 14px;
  color: #555;
}

.box {
  background: #f7f7fb;
  padding: 12px 14px;
  border-radius: 6px;
  margin: 10px 0;
  line-height: 1.6;
}

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.last-left {
  text-align-last: left;
}

.last-center {
  text-align-last: center;
}

.last-right {
  text-align-last: right;
}

.last-justify {
  text-align-last: justify;
}

Browser Support

The following information will show you the current browser support for the CSS text-align-last property. Hover over a browser icon to see the version that first introduced support for this CSS property.

This property is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!