Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Susan Sarandon
Freigeben: 2024-11-23 16:49:15
Original
352 Leute haben es durchsucht

How Can I Make Text Stretch Horizontally to Fill a Div's Width?

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;
}
Nach dem Login kopieren
<div>
  Lorem ipsum sit dolor
  <span> </span>
</div>
Nach dem Login kopieren

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!

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