Geek Answers Handbook

Achieving full justification in HTML and CSS: works in restricted mode, but no-quirks mode messed up the height

I am trying to achieve full justification (as opposed to left justification, when the end line is left-justified and not 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>

Using 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 displayed in a mode with limited limits, and each paragraph is fully justified at will without additional space.

Using a document of type HTML 5 ( <!DOCTYPE html> ) or 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 displayed in quirks absence mode, and each paragraph is fully justified, but takes an extra line of space. Adding height: 0 to ::after does nothing (it no longer has height, as shown in the background: red example).

Live Demos: HTML 4.01 Transitional and HTML 5 Edition.

How to get HTML 4.01 transitional rendering in a document using strict or HTML 5 document?

(By the way, I am aware of a workaround to which the known contents are given, of assigning the height value to the p element and depending on the default overflow behavior to effectively achieve the correct result. I do not agree that as an answer, I am looking for a genuine solution that can be done without hidden knowledge or intercepting JavaScript to resize - suppose a paragraph is an arbitrary number of lines.)

+7
html css dtd quirks-mode
source share
1 answer

Instead of the :after trick, which tries to control the justification of the last line, use the text-align-last property, which is now pretty well supported if you additionally use the version prefix -moz- :

 p { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; }
+8
source share

More articles:


All Articles