Justify All Text Including Last Line

Posted by: Alex on December 15, 2013

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:

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.

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