How to center-justify the last line of text in CSS?

html

responsive-design

css

best-practices

byAlex Kataev·Oct 7, 2024

To center-justify the last line of a block of text in CSS, we whip out the secret weapon: a 0-width :after pseudo-element with text-align: justify;. This technique scoffs at center alignment issues, helping the last line center itself by filling the remaining void with a non-existent entity. Ghostbusters would be proud.

.center-last {
  /* We start with, but not end with justice, why so? Read on... */
  text-align: justify;
}

.center-last:after {
  /* The Ghost that saves the day, doesn't even exist to the eye */
  content: '';
  display: inline-block;
  width: 100%;
  height: 0; /* Because zero can be a hero */
}

Now, bestow your text container with the .center-last blessing:

<p class="center-last">Your text here which sagely centers its last line.</p>

Lo and behold, all lines are justified - the last standing tall and centered, due to our phantom-full-width pseudo-element.

The `text-align-last` gambit

Unlike chess, you don't always need to protect your bishop. Here, we have the text-align-last property as one of our knights. It stands guard for the last line of text, aligning them center, left, right, or justify as per your command.

.para-last-center {
  /* Justify, then pacify, in that order and see the magic! */
  text-align: justify;
  text-align-last: center;
}

Inscribe this on your sacred HTML parchment:

<p class="para-last-center">A center-aligned last line awaits at the ending of this parable.</p>

But beware young padawan! The force doesn't work the same in every corner of the galaxy. text-align-last isn't universally recognized, notably in the far away lands of Internet Explorer. Even there, start and end values are considered folklore.

The `span` spanner in the works

When spells and potions don't work, we pull out the humbler tools. For short textual melodies, an efficient work-around is to corral the last line in a <span>, and command it with text-align: center.

Tactical align deployments

For those who believe in The Art of War, aligning your last line should be nothing short of a strategic manoeuvre. Strategize using word counts which help you plan which hill your last line will defend or attack from. Prepare alternatives in the event text-align: justify chooses not to take part in your battles.

The winds and whims of CSS

The prophecy of CSS advancement

The sages at W3C and valiant folks at Adobe are brewing a spell for enhanced text justification. Our saga might soon be blessed with more intrinsic weaponry for alignment dilemmas.

Vitally casting CSS

Meanwhile, the spellbook of CSS has different charms to cast, each leading us to our desired destinies. Flexing the elements of your body text doesn't directly align the last line, but it can summon the power of versatile layouts.

The dance of limitation

One must acknowledge the demons of constraints. text-align: justify doesn’t always yield the desired result, but in the dance of CSS nobody falls without a backflip. Be it faux positioning, pseudo-elements, or dedicated containers, numerous paths can lead you to victory.

explain-codes / Html / How to center-justify the last line of text in CSS?

Linked

How to align texts inside of an input?



Why is the <center> tag deprecated in HTML?



How to change the height of a ``?



Using new line(\n) in string and rendering the same in HTML



Adding HTML entities using CSS content

