Können Sie mit CSS Text strecken, ohne seine Schriftgröße zu ändern?

Text mit CSS strecken: Ist das möglich?

Der Wunsch, Text zu strecken, ohne seine Schriftgröße zu ändern, ist eine häufige Herausforderung im Webdesign . Um diesen einzigartigen Effekt zu erzielen, kommen CSS-2D-Transformationen ins Spiel.

Diese Technik wird von modernen Browsern, einschließlich IE9, unterstützt und ermöglicht es Ihnen, Text vertikal zu verformen und dabei seine ursprüngliche Größe beizubehalten. So funktioniert es:

1. Den Text in ein Div einschließen: Beginnen Sie damit, den Text, den Sie strecken möchten, in ein
   einzuschließen. Element.
2. CSS-Transformation anwenden:Verwenden Sie innerhalb der auf das Div angewendeten Klasse die folgende CSS-Regel:

<code class="css">transform: scale(2,1);</code>

Diese Skalierungstransformation skaliert den Text um den Faktor 2 vertikal (entlang der y-Achse), während die horizontalen Abmessungen (x-Achse) unverändert bleiben.

3. Inline-Block-Eigenschaft hinzufügen: Fügen Sie die Anzeige hinzu: inline-block-Eigenschaft, um sicherzustellen, dass der gestreckte Text innerhalb seines Containers umbrochen wird.

Beispiel:

<code class="html"><p>I feel like <span class="stretch">stretching</span>.</p></code>

<code class="css">span.stretch {
    display:inline-block;
    transform:scale(2,1);
}</code>

In diesem Beispiel wird das Wort gestreckt vertikal „dehnen“, während der Rest des Textes ungedehnt bleibt.

Das obige ist der detaillierte Inhalt vonKönnen Sie mit CSS Text strecken, ohne seine Schriftgröße zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!