Stretching text horizontally using CSS

css, html, text

Solution

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.

Problem

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?

Original source

Related problems