Can You Stretch Text Without Altering Its Font Size with CSS?

Stretching Text with CSS: Is It Possible?

The desire to stretch text without altering its font size is a common challenge in web design. To achieve this unique effect, CSS 2D Transforms come into play.

Supported by modern browsers, including IE9 , this technique allows you to deform text vertically while maintaining its original size. Here's how it works:

1. Wrap the Text in a Div: Start by enclosing the text you want to stretch in a
   element.
2. Apply CSS Transform: Within the class applied to the div, use the following CSS rule:

<code class="css">transform: scale(2,1);</code>

This scale transformation scales the text by a factor of 2 vertically (along the y-axis) while keeping its horizontal (x-axis) dimensions unchanged.

3. Add Inline-Block Property: Add the display:inline-block property to ensure that the stretched text wraps within its container.

Example:

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

<code class="css">span.stretch {
    display:inline-block;
    transform:scale(2,1);
}</code>

This example will stretch the word "stretching" vertically while keeping the rest of the text unstretched.

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