Achieving full justification in HTML and CSS: works in limited-quirks mode but no-quirks mode messes up the height
I am trying to achieve full justification (as distinct from left justification, where the final line is left-aligned rather than justified) in HTML and CSS.
I have this document, plus a doctype definition:
<style>
p {
border: 1px solid blue;
text-align: justify;
}
p::after {
content: "";
width: 100%;
display: inline-block;
}
</style>
<meta charset=utf-8>
<title>Justification</title>
<p>Foo bar</p>
<p>Foo bar</p>
<p>Foo bar</p>
With the HTML 4.01 Transitional doctype (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">), the document is rendered in limited-quirks mode and each paragraph is fully justified as desired, with no extra space being taken.
With the HTML 5 doctype (<!DOCTYPE html>) or with the HTML 4.01 (Strict) doctype (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
), the document is rendered in no-quirks mode and each paragraph is fully justified, but takes an extra line of space. Adding height: 0 to the ::after does nothing (it already has no height as the likes of background: red will demonstrate).
Live demonstrations: HTML 4.01 Transitional and HTML 5 editions.
How can I get the HTML 4.01 Transitional rendering in the document with the Strict or HTML 5 doctype?
(Incidentally, I am aware of the workaround, given known contents, of assigning a value for height to the p element and depending on the default overflow behaviour to achieve effectively the right result. I will not accept that as an answer—I am seeking a genuine solution that can be done without hidden knowledge or JavaScript interception of resizing—assume the paragraph to be an arbitrary number of lines.)
Answer
Instead of the :after trick that tries to control the justification of the last line, use the text-align-last property, which is now rather well supported if you additionally use a -moz- prefixed version:
p {
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
}