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
Freigeben: 2024-12-10 02:21:12
Original
397 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!

Quelle:php.cn
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage