2014-06-29 9 views
7

próbuję osiągnąć pełne uzasadnienie (w odróżnieniu od lewe usprawiedliwienia, gdzie jest lewo ostateczna linia -podpisany, a nie usprawiedliwiony) w HTML i CSS.Osiągnięcie pełnego uzasadnienia w HTML i CSS: pracuje w trybie ograniczonym-quirks ale no-dziwactwa tryb bałagan wysokość

mam ten dokument, a także definicji 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> 

Z doctype Transitional HTML 4.01 (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">), dokument jest renderowany w trybie ograniczonym-quirks i każdy akapit jest w pełni uzasadnione, ponieważ jest to pożądane, z nie jest pobierana dodatkowa przestrzeń.

Z HTML 5 doctype (<!DOCTYPE html>) lub z HTML 4.01 (ścisła) doctype (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ), dokument jest renderowany w trybie no-quirks i każdy akapit jest w pełni uzasadnione, ale bierze dodatkową linię przestrzeni . Dodanie height: 0 do ::after nic nie robi (nie ma już wzrostu, tak jak to pokazane jest na przykład jako background: red).

Demonstracje na żywo: HTML 4.01 Transitional i HTML 5 wydań.

W jaki sposób mogę uzyskać renderowanie tymczasowe HTML 4.01 w dokumencie z typem roboczym Strict lub HTML 5?

(Nawiasem mówiąc, znam znane obejście tego problemu, przypisując wartość dla height do elementu p i zależnie od domyślnego zachowania przepełnienia, aby osiągnąć efektywny wynik.) Nie zaakceptuję tego jako odpowiedzi -Jestem poszukujących prawdziwej rozwiązanie, które można zrobić bez ukrytej wiedzy lub przechwyceniem JavaScript z rozmiaru-zakładamy paragraf być dowolna liczba linii).

+2

Uważaj, aby nie wywoływać przejściowego dokumentu HTML 4 "doctype HTML 4". * Ścisły * * typ dokumentu HTML 4 będzie generował taki sam wynik, jaki ma typ dokumentu HTML5. Więc nie jest to różnica między HTML 4 i HTML5, ale różnica między trybem ścisłym a prawie ścisłym. – BoltClock

+0

@BoltClock Dawno nie pisałem HTML4, że z jakiegoś powodu zapomniałem o ścisłym doctype, mimo że wciąż pamiętałem ścisły/przejściowy podział XHTML! –

+0

@BoltClock: dzięki za podpowiedź; masz absolutną rację, a to może mi pomóc w śledzeniu tego. Mam nadzieję, że to możliwe! Zaktualizowałem to pytanie, aby wyjaśnić te kwestie. –

Odpowiedz

8

zamiast :after trik, który próbuje kontrolować uzasadnienie w ostatnim wierszu użyj właściwości text-align-last, która jest teraz dość dobrze obsługiwana, jeśli dodatkowo używasz -moz- wersja z prefiksem:

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

Świetnie! Nie wiedziałem o tym, i robi dokładnie to, co chciałem. ☺ Nie wiem, czy Opera i Safari obecnie go wspierają; artykuł MDN sugeruje, że tak nie jest, ale prawdopodobnie jest nieaktualny, zwłaszcza w odniesieniu do opery opartej na Blink; z tego, co robię obecnie, jest to akceptowalny kompromis. –

+0

nadal nie ma safari, iOS, opera od grudnia 2016. bummer. – squarecandy

Powiązane problemy