2014-06-29 10 views
7

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.)

+2

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

+0

@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! –

+0

@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. –

risposta

8

Invece del trucco :after che cerca di controllare la giustificazione l'ultima riga, usa la proprietà text-align-last, che ora è piuttosto ben supportata se usi anche un -moz- versione con prefisso:

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

Ottimo! Non sapevo di quello, e fa esattamente quello che volevo. ☺ Non sono sicuro che Opera e Safari lo supportino attualmente; l'articolo MDN suggerisce che non lo fanno, ma probabilmente è obsoleto, specialmente per quanto riguarda l'Opera basata su Blink; per quello che sto facendo attualmente è comunque un compromesso accettabile. –

+0

ancora nessun safari, iOS, opera dal dicembre 2016 pessimo. – squarecandy