stretching text css code example

Example 1: font-strech css

/* Keyword values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Percentage values */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;

Example 2: how to stretch text in javascript

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

Tags:

Html Example

Recent Posts