Wie kann ich die letzte Textzeile in einem Div ausrichten?

Ausrichten der letzten Zeile eines Divs an ausgerichtetem Text

In bestimmten Szenarien ist es notwendig, die letzte Zeile eines Divs an auszurichten Blocksatztext. Während dies normalerweise kein Standardverhalten für Divs ist, kann eine browserübergreifende Methode diesen gewünschten Effekt erzielen.

Die Implementierung erfordert eine Kombination aus text-align-last: justify; und eine Variation der Pseudo-Content-Methode :after. Die CSS-Kombination berücksichtigt erfolgreich die Browserkompatibilität, einschließlich IE6.

So wenden Sie diese Methode an:

CSS:

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

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

Hinweis: Wenn Ihr Div nur eine Textzeile enthält, ist zusätzliches CSS erforderlich, um eine zusätzliche Leerzeile zu verhindern erscheint:

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

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

Diese Technik stellt erfolgreich sicher, dass die letzte Zeile eines div mit ausgerichtetem Text ausgerichtet ist, was eine größere Flexibilität bei der Textformatierung für verschiedene Webdesign-Anforderungen bietet.

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