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中的缩放转换属性：

.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＆lt; 9）。

还要考虑到元素将有效地保持其宽度，因为文本没有缩放，所以如果你有一些布局怪癖，这可能是原因。

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

在这里，我设置缩放<h1>的bg颜色以显示效果。

增加文本的高度而不增加其宽度

2 个答案: