Can You Vertically Stretch Text in CSS Without Changing Its Font Size?

Can CSS Vertically Distort Text While Preserving Size?

The provided code example illustrates how CSS 2D Transforms can be utilized to stretch text vertically without altering its font size. This technique is compatible with most modern web browsers, including IE9 and onward.

The following code snippet demonstrates how to implement this effect:

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

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

Applying this code to the specified portion of the text would result in its vertical exaggeration without any impact on its size.

The above is the detailed content of Can You Vertically Stretch Text in CSS Without Changing Its Font Size?. For more information, please follow other related articles on the PHP Chinese website!