Wie kann ich die letzte Textzeile in einem Div in allen Browsern ausrichten?-CSS-Tutorial-php.cn

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

Susan Sarandon

Freigeben： 2024-12-10 02:21:12

Original

522 Leute haben es durchsucht

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%;
}

Nach dem Login kopieren

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%;
}

Nach dem Login kopieren

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!

Vorheriger Artikel：Wie animiere ich Hintergrundbilder mit CSS3 richtig? Nächster Artikel：Wie kann ich die Spaltenreihenfolge in Bootstrap 3 mithilfe von „col-lg-push“ und „col-lg-pull“ steuern?

Erklärung dieser Website

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

Aktuelle Ausgaben