html - 在不增加宽度的情况下增加文本的高度

Question

我想增加 html 中文本的高度，而不按比例增加其宽度。当我增加 时font-size，增加是水平方向和垂直方向。

---

您可能会认为它就像拉伸文本的高度，而其宽度保持不变。我可以使用 CSS 做到这一点吗？

Answer 1

这可能会为你做。

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

Answer 2

您可以使用 CSS3 中的 scale 变换属性：

.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/

这里我设置了缩放的bg颜色<h1>来展示效果。