How Can I Justify the Last Line of Text in a Div?

Aligning the Last Line of a Div with Justified Text

In certain scenarios, it becomes necessary to align the last line of a div with justified text. While this is typically not a standard behavior for divs, a cross-browser method can achieve this desired effect.

Implementation requires a combination of text-align-last: justify; and a variation of the :after pseudo-content method. The CSS combination successfully addresses browser compatibility, including IE6 .

To apply this method:

CSS:

p, h1 {
  text-align: justify;
  text-align-last: justify;
}

p:after, h1:after {
  content: "";
  display: inline-block;
  width: 100%;
}

Note: If your div contains only one line of text, additional CSS is necessary to prevent an extra blank line from appearing:

h1 {
  text-align: justify;
  text-align-last: justify;
  height: 1em;
  line-height: 1;
}

h1:after {
  content: "";
  display: inline-block;
  width: 100%;
}

This technique successfully ensures that the last line of a div aligns with justified text, providing greater flexibility in text formatting for various web design needs.

The above is the detailed content of How Can I Justify the Last Line of Text in a Div?. For more information, please follow other related articles on the PHP Chinese website!