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

Justify the Last Line of a Div

The default text alignment for the last line of a

is often left-aligned, even when the rest of the text is justified. This can be frustrating, especially if you need the last line to be justified for aesthetic or readability reasons.

Cross-Browser Solution

To justify the last line of a

across various browsers, including IE6 , you can use the following CSS:

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

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

This method combines the text-align-last: justify; property, which is supported by IE, with a variation of the :after pseudo-content method. It also includes a fix to remove extra space added after one-line text elements.

One-Line Text Fix

If your

contains only one line of text, you can use the following CSS to prevent the extra blank line that the previous solution may cause:

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

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

Additional Resources

For more detailed information, refer to:

• http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/

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