Can I Elongate Text Vertically in CSS Without Changing Font Size?

Elongating Text with CSS

Question:

Is it possible to stretch text vertically using CSS without enlarging the font size?

Answer:

Yes, CSS 2D Transforms allows you to achieve this effect in most modern browsers.

Implementation:

1. Define a CSS class for the stretched text:

span.stretch {
    display:inline-block;
}

2. Apply the transform property to scale the text vertically:

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

Usage:

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

This will display the text "stretching" stretched vertically by a factor of 2.

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