How to Stretch a Text with CSS

In this snippet, we’ll show how to stretch text horizontally or vertically using CSS. You can achieve this using the transform property with the scale() function, which accepts horizontal and vertical scaling factors.

Let’s see how to solve this problem step by step.

Create HTML

Insert a <span> element with the text you want to stretch inside a <p>.

How to Stretch a Text with CSS

<p>This text is
  <span class="stretch">stretching</span>.
</p>

Add CSS

Set the display property to “inline-block”.
Set the margin property to avoid text collision.
Use the transform property with the scale() function.

How to Stretch a Text with CSS

span.stretch {
  display: inline-block;
  margin: 35px;
  transform: scale(2, 1);
}

Let’s see the full example.

Example of stretching the text:

How to Stretch a Text with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span.stretch {
        display: inline-block;
        margin: 35px;
        transform: scale(2, 1);
      }
    </style>
  </head>
  <body>
    <p>This text is
      <span class="stretch">stretching</span>.
    </p>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose">This text is <span class="stretch"> stretching</span>.

</div>In the next example, we stretch the text horizontally. Besides the transform and display properties, we use letter-spacing to add space between letters, font-size to set the size, transform-origin to scale from the top-left corner, and margin-bottom to adjust the layout. The transform property uses scaleX(2) to stretch the text horizontally.

Example of stretching the text horizontally:

How to Stretch a Text with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .stretchedText {
        letter-spacing: 2px;
        display: inline-block;
        font-size: 40px;
        transform: scaleX(2);
        transform-origin: 0 0;
        margin-bottom: -50%;
      }
      span {
        font-size: 20px;
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <span class="stretchedText">This is a stretched text</span>
    <span>and this is a normal text.</span>
  </body>
</html>

Try it Yourself »

Example of stretching the text vertically:

How to Stretch a Text with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p#text {
        display: inline-block;
        transform: scale(1, 3);
        transform-origin: 0% 70%;
      }
      p {
        display: inline;
      }
    </style>
  </head>
  <body>
    <p id="text">A vertically stretched text</p>
  </body>
</html>

Try it Yourself »