CODEWITHSUNDEEP
htmlcss
OneMoreError
OneMoreError

Reputation: 7728

Increasing the height of text without increasing its width also

I want to increase the height of my text in html, without increasing its width proportionally. When I increase the font-size, the increase is both in the horizontal as well as vertical direction.

You may think of it like stretching the height of the text, with its width constant. Can I do that using CSS?

Upvotes: 0

Views: 235

Answers (2)

Kyle
Kyle

Reputation: 67194

You can use the scale transform property from CSS3: 

.condensed {
    -webkit-transform: scale(1, 2);
       -moz-transform: scale(1, 2);
        -ms-transform: scale(1, 2);
         -o-transform: scale(1, 2);
            transform: scale(1, 2);
}​

Because it takes two values, you can scale the height and width of the letters.

http://jsfiddle.net/Kyle_Sevenoaks/8bT8q/

As you can see, if you switch the values, the letters are stretched the other way.

http://jsfiddle.net/Kyle_Sevenoaks/8bT8q/1/

Be aware that this is a CSS3 property and won't be supported by all browsers (mostly IE<9).

Also take in to account that the element will effectively keep its width as i the text were not scaled, so if you have some layout quirks this might be the reason.

http://jsfiddle.net/Kyle_Sevenoaks/8bT8q/2/

Here I set the bg color of the scaled <h1> to show the effect.

Upvotes: 2

Marcus Johansson
Marcus Johansson

Reputation: 2667

This will probably do it for you.

.higher {
    transform:scale(1,2);
    -webkit-transform:scale(1,2);
    -moz-transform:scale(1,2);
    -ms-transform:scale(1,2);
    -o-transform:scale(1,2);
}

Upvotes: 2

Related Questions