Wie kann ich Text mithilfe von CSS strecken, um die Breite eines Divs auszufüllen?

Text strecken, um die Div-Breite einzunehmen

In einer Situation, in der Ihr Div eine konsistente Breite beibehält, aber unterschiedliche Textmengen enthalten kann, besteht die Herausforderung darin entsteht: Wie verteilt man den Buchstabenabstand, um das Div optimal auszufüllen?

Glücklicherweise ist dieses Kunststück durch eine Strategie möglich Kombination aus CSS-Eigenschaften und einem cleveren Hack.

Lösung:

1. Text-align:justify; anwenden; zum div: Dadurch wird sichergestellt, dass der Text sowohl auf der linken als auch auf der rechten Seite des zugewiesenen Platzes gleichmäßig ausgerichtet wird.
2. Ein span-Element einbinden: Implementieren Sie ein span-Tag neben dem div und Stellen Sie die Breite mithilfe der Inline-Block-Anzeige auf 100 % und die Höhe auf 1 em ein. Dies dient als „Abstandshalter“ am Ende des Textes.

Beispielcode:

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>

Diese Strategie prägt den Text um sich über die Breite des Divs auszudehnen und dabei den Buchstabenabstand beizubehalten, wodurch ein optisch ausgewogener Effekt entsteht.

Das obige ist der detaillierte Inhalt vonWie kann ich Text mithilfe von CSS strecken, um die Breite eines Divs auszufüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!