io sto cercando di realizzare piena giustificazione (da non confondersi giustificazione a sinistra, dove la linea finale è lasciato allineati piuttosto che giustificati) in HTML e CSS.La piena giustificazione nel HTML e CSS: funziona in modalità-quirks limitate ma nessuno quirks mode scombina l'altezza
ho questo documento, oltre a una definizione doctype:
<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>
Con il doctype Transitional HTML 4.01 (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
), il documento viene reso in modalità-quirks limitate e ogni paragrafo è pienamente giustificato, se lo desideri, con non viene occupato spazio extra.
Con l'HTML 5 doctype (<!DOCTYPE html>
) o con la HTML 4.01 doctype (Strict) (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
), il documento viene reso in modalità no-capricci e ogni paragrafo è pienamente giustificato, ma richiede una linea supplementare di spazio . L'aggiunta di height: 0
a ::after
non fa nulla (non ha già altezza come dimostrano i like di background: red
).
Dimostrazioni dal vivo: HTML 4.01 Transitional e HTML 5 edizioni.
Come posso ottenere il rendering transizionale HTML 4.01 nel documento con il doctype Strict o HTML 5?
(Per inciso, io sono consapevole della soluzione, dato il contenuto noti, di assegnare un valore per height
all'elemento p
e in base al comportamento di overflow di default per raggiungere in modo efficace il risultato giusto. Non accetterò che come una risposta -I sto cercando la soluzione originale per che può essere fatto senza la conoscenza nascosta o l'intercettazione JavaScript del ridimensionamento-assumere il punto di essere un numero arbitrario di linee.)
Fare attenzione a non chiamare il doctype di transizione HTML 4 "il doctype HTML 4". Il * strict * HTML 4 doctype produrrà lo stesso risultato del doctype HTML5. Quindi questa non è una differenza tra HTML 4 e HTML5, ma la differenza tra modalità rigorosa e quasi rigida. – BoltClock
@BoltClock È da così tanto tempo che ho scritto HTML4 che mi sono dimenticato del rigoroso doctype per qualche ragione, anche se ricordo ancora il divario rigido/transitorio XHTML! –
@BoltClock: grazie per il suggerimento lì; hai assolutamente ragione, e questo potrebbe aiutarmi a rintracciarlo. Speriamo sia possibile! Ho aggiornato la domanda per chiarire queste cose. –