Wie kann ich die letzte Textzeile in einem DIV browserübergreifend ausrichten?

Ausrichten der letzten Zeile eines DIV

Trotz der in der ursprünglichen Abfrage aufgeworfenen logischen Bedenken können wir klären, wie Text ausgerichtet wird: Die letzte Zeile in a ausrichten DIV. Normalerweise wird diese Endzeile oft nach links ausgerichtet, anstatt den Textausrichtungsregeln zu folgen.

Um dieses Problem zu beheben, stellen wir eine umfassende Lösung vor, die mit mehreren Browsern kompatibel ist, einschließlich IE6 und späteren Versionen.

Die Cross-Browser-Methode

Diese Methode nutzt zwei Schlüssel Techniken:

text-align-last: justify;: Diese CSS-Eigenschaft wurde speziell dafür entwickelt, die letzte Textzeile in einem Element auf Blockebene auszurichten. Es wird jedoch nur vom Internet Explorer unterstützt.

:after Pseudo-Content mit Inline-Block:

Diese Technik verwendet das :after Pseudo-Element, um einen einzufügen unsichtbares Inline-Block-Element nach dem DIV. Dieses Element wird dann so gestaltet, dass es eine Breite von 100 % hat, wodurch es effektiv die gesamte Breite des DIV einnimmt und den Text in seiner vollen Ausdehnung zwingt.

CSS-Implementierung

p, h1 {
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

Handling Single -Zeilentext

In Fällen, in denen das DIV nur eine Textzeile enthält, ist eine zusätzliche CSS-Regel erforderlich, um zu verhindern, dass eine zusätzliche Leerzeile hinzugefügt wird :nach Pseudoelement.

h1 {
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

Zusätzliche Ressourcen

Weitere Details und Einblicke in diese Technik finden Sie unter:

[Cross-Browser CSS: Letzte Zeile ausrichten Absatz Text](http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/)

Das obige ist der detaillierte Inhalt vonWie kann ich die letzte Textzeile in einem DIV browserübergreifend ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!