Wie kann ich Text horizontal strecken, um die Breite eines Teils auszufüllen?

Text horizontal strecken, um ihn an die Div-Breite anzupassen

In der Webentwicklung ist es oft wünschenswert, dass Text horizontal erweitert wird, um ein Div eines bestimmten Elements auszufüllen Breite. Standardmäßig wird der Text jedoch nicht gestreckt, um den zusätzlichen Platz einzunehmen.

Lösung: Textausrichtung und Inline-Element

Um diesen Effekt zu erzielen, können wir CSS-Text verwenden -align:justify zusammen mit einem kleinen Hack:

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>

Indem Sie den Text innerhalb des div ausrichten und ein leeres span-Element mit einer Breite hinzufügen Indem wir uns über das gesamte Div erstrecken, erzwingen wir, dass sich der Text horizontal ausdehnt, um den verfügbaren Platz auszufüllen.

Diese Technik stellt sicher, dass der Text das Div immer perfekt ausfüllt, unabhängig von seiner Länge, wodurch ein optisch ansprechendes Layout entsteht.

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