Pouvez-vous étirer le texte sans modifier la taille de sa police avec CSS ?

Étendre le texte avec CSS : est-ce possible ?

Le désir d'étirer le texte sans modifier la taille de sa police est un défi courant dans la conception Web . Pour obtenir cet effet unique, les transformations CSS 2D entrent en jeu.

Supportée par les navigateurs modernes, dont IE9 , cette technique permet de déformer le texte verticalement tout en conservant sa taille d'origine. Voici comment cela fonctionne :

1. Enveloppez le texte dans un Div : Commencez par joindre le texte que vous souhaitez étirer dans un
   element.
2. Appliquer la transformation CSS : Dans la classe appliquée au div, utilisez la règle CSS suivante :

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

Cette transformation d'échelle met à l'échelle le texte par un facteur 2 verticalement (le long de l'axe y) tout en gardant ses dimensions horizontales (axe x) inchangées.

3. Ajouter une propriété Inline-Block : Ajoutez l'affichage : propriété inline-block pour garantir que le texte étiré s'enroule dans son conteneur.

Exemple :

<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>

Cet exemple étirera le mot "s'étirer" verticalement tout en gardant le reste du texte non étiré.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!