Wie kann ich mithilfe von CSS die Textgröße dynamisch an die Breite eines Divs anpassen?

Text dynamisch an die Div-Breite anpassen

In Szenarien, in denen die Div-Breite statisch bleibt, während der Textinhalt variabel ist, wird der Text im Blocksatz ausgerichtet reicht vielleicht nicht aus. Um eine perfekte Passform zu erreichen, muss der Buchstabenabstand angepasst werden.

CSS-Lösung mit einem Trick

Um dies zu erreichen, verwenden Sie die Kombination aus text-align:justify und einem cleveren Hack:

CSS:

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

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

HTML:

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

Erklärung:

• Stellen Sie die Textausrichtung so ein, dass sie mit Text ausgerichtet ist. align:justify.
• Fügen Sie ein span-Element innerhalb des ein div.
• Stilisieren Sie die Spanne mit Hintergrundfarbe (zur Demonstration sichtbar), 100 % Breite, 1em-Höhe und Inline-Block-Anzeige.
• Indem Sie die Spannenbreite auf 100 % setzen und festlegen transparent, fungiert es als Behälter, der sich ausdehnt, um den verbleibenden Platz im Div auszufüllen.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS die Textgröße dynamisch an die Breite eines Divs anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!