Wie kann ich mit CSS dafür sorgen, dass Text die Breite eines Containers perfekt ausfüllt?

Strecken von Text an die Containerbreite

Die Verbesserung der Textästhetik innerhalb eines eingeschränkten Div ist eine häufige Herausforderung. Wenn der Textinhalt variiert, ist es wünschenswert, ein ausgefeiltes und ausgewogenes visuelles Erscheinungsbild beizubehalten. In diesem Artikel wird untersucht, wie Sie diese nahtlose Integration mithilfe einer Kombination aus CSS und einer cleveren Technik erreichen können.

Lösung: Textausrichtung und ein subtiler Trick

Die CSS-Eigenschaft text-align:justify verteilt den Text innerhalb eines Divs gleichmäßig und richtet ihn sowohl am linken als auch am rechten Rand aus. Bei der Standardausrichtung wird jedoch der angegebene Buchstabenabstand beibehalten. Für eine wirklich gute Passform fügt ein kleiner Hack einen transparenten Bereich mit einer Breite von 100 % hinzu.

div{
  background-color:gold;
  text-align:justify;
}

span{
  background-color:red;
  width:100%;
  height:1em;
  display:inline-block;
}

<div>
  Lorem ipsum sit dolor
  <span> </span>
</div>

Dieser Trick erzeugt im Wesentlichen einen „Dummy“-Raum, der die verbleibende Breite des Div ausfüllt und so zwingt Der Text soll erweitert und eng in seinem Container ausgerichtet werden.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS dafür sorgen, dass Text die Breite eines Containers perfekt ausfüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!