Menu
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.)
766
In order to suggest that some text be justified on both sides, you can use the align="justify" attribute in HTML, or the text-align:justify declaration in CSS, or both.
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
