Justify the last line of text with CSS

Use the property made for the job

If a particular design needs the final line stretched across the measure, use text-align-last. The old full-width pseudo-element trick is no longer necessary for this effect.

<p class="justify-last">
  This short paragraph shows a deliberate typography treatment.
  Resize the container to see how the final line changes.
</p>

.justify-last {
  max-inline-size: 40rem;
  text-align: justify;
  text-align-last: justify;
}

Add the rule to the stylesheet that owns the component. Remove any earlier ::after spacer used for the same purpose, or it can still introduce unwanted space.

Check the actual words

Justification is not automatically better typography. A final line with only two words can end up with a huge gap between them. Check the real copy, narrow screens and increased text size—not only a generous desktop sample.

For ordinary reading text, leaving the final line naturally aligned is often the better choice:

.reading-copy {
  text-align: start;
  text-align-last: auto;
}

start follows the writing direction. Use layout tools such as flex or grid for navigation and rows of controls; do not spread those elements with text justification. An unsupported text-align-last declaration should leave a readable paragraph, not require a JavaScript fallback.

Reference: text-align-last.

Kept here for reference and earlier links. The updated guide above is the recommended starting point; older code may depend on retired services or different software versions.

Justified text is a very popular type of text formatting, most commonly seen in text-based books/novels.
It's a very easy technique to mimic online and in word processing, however, the default effect is to simply align the very last night of a paragraph to the left.

Example of justified text with last line not being justified by the web browser:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500's when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

You should be able to notice above the last several words are aligned to the left, with a gap to the right of them. (This may not be the case on all viewports, due to this site [guwii] incorporating Responsive Web Design.

It is however possible to get that last line to always span the full width like it's predeceasing lines with some simple CSS:


p.justify-last:after {
  content: "";
  display: inline-block;
  width: 100%;
}

<p class="justify-last">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

You should now notice the last line spans the entire width. With the output now looking like the following:

It's not the nicest of effects, but useful for certain projects!