How to Stretch a Text with CSS

In this snippet, we’ll show how to stretch a text horizontally or vertically using CSS. This problem of stretching a text can be solved by using the transform property with the “scale” value.

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

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Insert a <span> element with the text you want to stretch inside a <p>.
<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 set to “scale”. We use the -webkit-, -moz-, and -o- prefixes.
span.stretch {
  display: inline-block;
  margin: 35px;
  -webkit-transform: scale(2, 1);
  -moz-transform: scale(2, 1);
  -o-transform: scale(2, 1);
  transform: scale(2, 1);
}

Let’s see the full example.

Example of stretching the text:

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

Result

This text is stretching.

In the next example, too, we stretch the text horizontally. Here, besides the transform and display properties, we use the letter-spacing to add space between letters, font-size to set the size we want, transform-origin to scale from the top of the line, and margin-bottom for the “stretchedText”.

Example of stretching the text horizontally:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .stretchedText {
        letter-spacing: 2px;
        display: inline-block;
        font-size: 40px;
        transform: scaleY(0.5);
        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>

Example of stretching the text vertically:

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