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

CSS Transform: Text Transform

Can you stretch text using CSS? You don't want the font to be larger because that will make the text appear thicker than the smaller text next to it. You just want to stretch the text vertically, deforming it. This should be in one div and the normal text in another div next to it. How do you do this?

Solution: Use CSS 2D Transforms

Actually, you can use CSS 2D Transforms to achieve this. Almost all modern browsers (including IE9) support this feature. Here is an example:

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

The above is the detailed content of Can you vertically stretch text using CSS without making it appear larger?. For more information, please follow other related articles on the PHP Chinese website!