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?

Answer 1

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.