Can CSS Stretch Text Without Changing Font Size?

Can CSS Create Text Deformation?

Question: Is it possible to stretch text using CSS without altering font size? The desired effect is vertical deformation, making the text appear elongated.

Answer: Yes, CSS 2D Transforms enables text deformation. Browser support is extensive, encompassing all major browsers post-IE9.

Here's an example of how to achieve 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>

This code creates a deformed "stretching" span within a normal text paragraph.

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