Stretching text horizontally using CSS

Question

I am required to stretch text horizontally, but the only thing I could find was font-stretch which, according to w3schools, isn't supported by any browser.

Is there any other way which I can meet this effect?

possible duplicate of [Css, Can I stretch text?](http://stackoverflow.com/questions/6351013/css-can-i-stretch-text) — web-tiki, Jul 04 '14 at 07:49

score 21 · Accepted Answer · edited Feb 05 '21 at 19:39

21

Yes - you can achieve this by using CSS 2D transforms.

Here's a working JSFiddle.

Note that the example in the Fiddle/code below is for Chrome/Safari (WebKit), however, you can use 2D transforms in all major browsers by using the -moz-, -o-, and ms equivalent prefixes/methods!

HTML:

<span>Hello!</span>

CSS:

span {    
  transform:scale(3,1); 
  -webkit-transform:scale(3,1);
  display:inline-block; 
}

Support:

It is supported in Chrome, Firefox, IE9+ and Opera browsers.

edited Feb 05 '21 at 19:39

TylerH

20,799
66
75
101

answered Apr 08 '13 at 12:26

dsgriffin

66,495
17
137
137

1

I would have done that already but I'm waiting for the timer to count down. – JBrookes Apr 08 '13 at 12:39
1

The `moz` prefix is firefox specific, and firefox auto updates, so no need there. And, the `-ms-transform` prefix was only needed on pre-releases of IE9, so no need for support there. – Jack G May 19 '17 at 18:03
It seems the `display:inline-block` is mandatory, without it `transform` doesn't work. – Jose Manuel Abarca Rodríguez Apr 27 '22 at 19:16

score 0 · Answer 2 · answered Apr 08 '13 at 12:26

0

Do you mean this? With CSS:

text-align: justify

answered Apr 08 '13 at 12:26

Andrea Turri

6,480
7
37
63

Stretching text horizontally using CSS

2 Answers2

Linked