Menu
I am wondering if it's possible to change the height of inline text, without stretching the font, and without changing the line height in css.
An issue comes up when I have multi-line links with a hover effect: when moused over the lines the effect flickers on and off because of the increased line height: Example
Is there another way to do this?
676
To change the size of your text with inline CSS, you have to do it with the style attribute. You type in the font-size property, and then assign it a value.
Sets line height to be equal to a multiple of the font size. If your font size is 10px, your line height will be 10px, 18px, and 20px, respectively. Sets line height as a percentage of the font size of the element. If your font size is 10px, your line height will be 3px, 5px, and 11px respectively.
If the value of the line-height property is smaller than the value of the font-size , text may overflow the element, and text on one line may overlap text on another line above or below it. It is often convenient to set the value of the line-height in the font shorthand property.
You can increase height of font using below css
transform:scale(2,3); /* W3C */ -webkit-transform:scale(2,3); /* Safari and Chrome */ -moz-transform:scale(2,3); /* Firefox */ -ms-transform:scale(2,3); /* IE 9 */ -o-transform:scale(2,3); /* Opera */ JSFIDDLE
61
You won't be able to change the height of the font alone but you can adjust the font-size to work with the line height you have set.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
