在不增加寬度的情況下增加文本的高度

Question

我想增加html中文本的高度，而不是按比例增加寬度。當我增加font-size時，增加量既在水平方向，也在垂直方向。

---

您可能會想到它像拉伸文本的高度，其寬度不變。我可以使用CSS來做到這一點嗎？

Answer 1

您可以使用規模由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); 
}​ 

，因爲它需要兩個值，你可以擴展字母的高度和寬度。

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

正如你可以看到，如果切換值，字母被拉伸的其他方式。

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

要知道，這是一個CSS3特性，並且不會被所有的瀏覽器（IE大多9 <）的支持。

也考慮到該元素將有效地保持其寬度，因爲我的文本沒有縮放，所以如果你有一些佈局的怪癖，這可能是原因。

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

這裏我設置縮放<h1>的背景色顯示效果。

Answer 2

這可能會爲你做。

.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); 
}