Uneingeschränkte Rechtfertigung in HTML und CSS: arbeitet in limitierter Quirks-Modus, aber nicht-Quirks-Modus vermasselt die Höhe bis

I vollständige Begründung (im Unterschied zu Linksbündigkeit, wo die letzte Zeile links zu erreichen versuchen, ist - ausgerichtet und nicht gerechtfertigt) in HTML und CSS.Uneingeschränkte Rechtfertigung in HTML und CSS: arbeitet in limitierter Quirks-Modus, aber nicht-Quirks-Modus vermasselt die Höhe bis

Ich habe dieses Dokument sowie eine 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>

Mit dem HTML 4.01 Transitional doctype (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">), wird das Dokument in limitierter Quirks-Modus wiedergegeben wird und jeder Absatz ist vollkommen gerechtfertigt, wie gewünscht, mit kein zusätzlicher Platz wird genommen.

Mit den HTML 5 Doctype (<!DOCTYPE html>) oder mit der HTML 4.01 (Strict) Doctype (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ), das Dokument im No-Quirks-Modus wiedergegeben wird und jeder Absatz ist vollkommen gerechtfertigt, aber nimmt eine zusätzliche Zeile Platz . Das Hinzufügen von height: 0 zum ::after tut nichts (es hat bereits keine Höhe, wie das background: red zeigt).

Live-Demonstrationen: HTML 4.01 Transitional und HTML 5 Editionen.

Wie kann ich das HTML 4.01 Transitional Rendering im Dokument mit dem Strict oder HTML 5 Doctype bekommen?

(Übrigens ist mir die Problemumgehung bekannt, einen bekannten Wert für height dem Element p zuzuordnen und abhängig vom Standardüberlaufverhalten, um effektiv das richtige Ergebnis zu erzielen. Ich werde das nicht als Antwort akzeptieren -Ich ist eine echte Lösung suchen, das ohne verstecktes Wissen oder JavaScript Abhören von Ändern der Größe-nimmt den Absatz auf eine beliebige Anzahl von Zeilen durchgeführt werden kann.)

Quelle

2014-06-29 Chris Morgan

Achten Sie darauf, den HTML 4-Übergangsdoctype "the HTML 4 doctype" nicht aufzurufen. Der * strict * HTML 4 Doctype erzeugt das gleiche Ergebnis wie der HTML5 Doctype. Das ist also kein Unterschied zwischen HTML 4 und HTML5, sondern der Unterschied zwischen strengem und fast striktem Modus. – BoltClock

@BoltClock Es ist so lange her, dass ich HTML4 geschrieben habe, dass ich aus irgendeinem Grund den strikten Doctyp vergessen hatte, obwohl ich mich immer noch an die XHTML strikte/Übergangsdivision erinnerte! –

@BoltClock: Danke für den Hinweis da; Du hast absolut recht, und das kann mir helfen, es aufzuspüren. Hoffentlich ist es möglich! Ich habe die Frage aktualisiert, um diese Dinge zu klären. –

Statt den :after Trick, der die Berechtigung zu kontrollieren versucht, von In der letzten Zeile verwenden Sie die text-align-last Eigenschaft, die jetzt ziemlich gut unterstützt wird, wenn Sie zusätzlich eineverwendenPräfixversion:

p { 
    text-align: justify; 
    -moz-text-align-last: justify; 
    text-align-last: justify; 
}

Quelle

2014-06-29 08:46:20

Großartig! Wusste das nicht und es macht genau das, was ich wollte. ☺ Nicht sicher, ob Opera und Safari es derzeit unterstützen; der MDN-Artikel schlägt vor, dass sie es nicht tun, aber es ist wahrscheinlich veraltet, besonders in Bezug auf die Blink-basierte Opera; Für das, was ich gerade mache, ist das sowieso ein akzeptabler Kompromiss. –

noch keine Safari, iOS, Opera ab Dez. 2016. bummer. – squarecandy

Uneingeschränkte Rechtfertigung in HTML und CSS: arbeitet in limitierter Quirks-Modus, aber nicht-Quirks-Modus vermasselt die Höhe bis

Antwort

Verwandte Themen