Maison >interface Web >tutoriel CSS >Pouvez-vous étirer verticalement du texte à l'aide de CSS sans l'agrandir ?

Pouvez-vous étirer verticalement du texte à l'aide de CSS sans l'agrandir ?

Linda Hamilton
Linda Hamiltonoriginal
2024-10-28 02:18:02625parcourir

Can you vertically stretch text using CSS without making it appear larger?

Transformation CSS : Transformation de texte

Pouvez-vous étirer le texte en utilisant CSS ? Vous ne voulez pas que la police soit plus grande, car cela rendrait le texte plus épais que le texte plus petit à côté. Vous voulez simplement étirer le texte verticalement, en le déformant. Cela devrait être dans un div et le texte normal dans un autre div à côté. Comment faites-vous cela ?

Solution : Utiliser les transformations CSS 2D

En fait, vous pouvez utiliser les transformations CSS 2D pour y parvenir. Presque tous les navigateurs modernes (y compris IE9) prennent en charge cette fonctionnalité. Voici un exemple :

<code class="html"><p>I feel like <span class="stretch">stretching</span>.</p></code>
<code class="css">span.stretch {
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}</code>

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn