suchen

Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die letzte Textzeile in einem Div in allen Browsern ausrichten?

Wie kann ich die letzte Textzeile in einem Div in allen Browsern ausrichten?

Susan Sarandon
Susan SarandonOriginal
2024-12-10 02:21:12407Durchsuche

How Can I Justify the Last Line of Text in a Div Across All Browsers?

Die letzte Zeile eines Div ausrichten

Die Standardtextausrichtung für die letzte Zeile eines

wird häufig linksbündig ausgerichtet, auch wenn der Rest des Textes im Blocksatz ausgerichtet ist. Dies kann frustrierend sein, insbesondere wenn die letzte Zeile aus Gründen der Ästhetik oder der Lesbarkeit ausgerichtet werden muss.

Browserübergreifende Lösung

Um die letzte Zeile eines zu rechtfertigen

In verschiedenen Browsern, einschließlich IE6, können Sie das folgende CSS verwenden:

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

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

Diese Methode kombiniert text-align-last: justify; Eigenschaft, die vom IE unterstützt wird, mit einer Variation der Pseudo-Content-Methode :after. Es enthält auch einen Fix zum Entfernen von zusätzlichem Leerraum, der nach einzeiligen Textelementen hinzugefügt wurde.

Einzeiliger Text-Fix

Wenn Ihr

enthält nur eine Textzeile. Sie können das folgende CSS verwenden, um die zusätzliche Leerzeile zu verhindern, die die vorherige Lösung verursachen kann:

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

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

Zusätzliche Ressourcen

Für Nähere Informationen finden Sie unter an:

  • 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 in allen Browsern ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css if for Property default this http WordPress
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie animiere ich Hintergrundbilder mit CSS3 richtig?Nächster Artikel：Wie animiere ich Hintergrundbilder mit CSS3 richtig?

In Verbindung stehende Artikel

Mehr sehen