Home  >  Article  >  Web Front-end  >  How to lengthen font with css

How to lengthen font with css

WBOY
WBOYOriginal
2021-11-25 19:13:007659browse

In CSS, you can use the transform attribute to lengthen the font. When this attribute is used in conjunction with the "scale()" function, the element can be scaled and transformed. The syntax is "text element object {transform: scale(horizontal scale value, vertical scale value);}".

How to lengthen font with css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to lengthen the font in css

In css, you can use the transform attribute to lengthen the font. Let’s look at the example below. Take a look, the example is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>拉伸的文字</title>
  </head>
  <body>
    <p class="stretch">大家好,我是一段被拉伸的文字</p>
  </body>
  <style>
    .stretch {
      transform: scale(2, 1);
      transform-origin: 0 0;
    }
  </style>
</html>

Output result:

How to lengthen font with css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to lengthen font with css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn