How Can I Justify the Last Line of a DIV Across All Browsers?

Justifying the Last Line of a DIV: A Comprehensive Approach

Justifying the last line of a DIV can present a challenge, as it typically aligns left by default. However, there exists a method that effectively addresses this issue across browsers, including IE6 and beyond.

This method utilizes a combination of CSS properties:

• text-align-last: justify: Introduced by Microsoft, this property is supported by IE browsers.
• :after pseudo-content: This pseudo-element creates an invisible inline block that extends the width of the DIV.

Additionally, to handle single-line text elements, the following is recommended:

• Set the height and line-height of the element to 1em to prevent an unnecessary blank line.

CSS Implementation:

To justify the last line of a DIV, the following CSS rules can be used:

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

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

For one-line text elements, the following is necessary:

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

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

Detailed Explanation:

• text-align-last: justify: Specifies the alignment of the last line in a block element.
• :after pseudo-content: Creates an empty inline block that stretches the width of the DIV to ensure that the text-align: justify property applies to the last line.
• Height and line-height: For one-line text elements, setting the height and line-height to 1em prevents an empty line that would otherwise appear after the justified last line.

This combined approach ensures that the last line of a DIV is justified across multiple browsers, providing a professional and aesthetically pleasing layout.

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