在CSS中显示具有特殊字体和可变间距的旋转文本

Question

我想显示一些旋转-90度的文本（例如ABCDHFEJBF）。 我把它跨度做了

display: block;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

但后来我无法将范围调整为自定义尺寸。 我需要文本来保持一定的字体大小（例如20像素），但是我需要根据浏览器的高度来增加或减少字母之间的间距。

像这样：固定在页面左侧的浏览器高度的100％被旋转，并且字符之间的间距需要可变，因此字母之间的间距随着浏览器高度的增加而增加。

如果有人可以帮助，将不胜感激。

Answer 1

CSS具有letter-spacing ，可让您指定字母之间letter-spacing 。 将此值设置为百分比值将使您获得所需的效果。

编辑：显然，它不需要一个百分比值。 很高兴知道，因此更有理由看看JS位：P

如果需要的话，将其与一些简单的Javascript结合使用将使您对间距有更多的控制-请参阅此小提琴 ，以了解有效的JS实现。

$(document).ready(function()
{
    $(window).resize(function()
    {
        var spacing = Math.floor($(this).height() / 70) + 'px';
        $('span').css('letter-spacing', spacing);
        $('#spacing').html(spacing);
    });
});

<span>Hello there</span>
<div id="spacing"></div>

Answer 2

您想要的可以完成...但是没有一些脚本，您每次都需要设置css规则。 像这样

span{
    display: block;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    font-size:20px;
    letter-spacing:1em;
    margin-top:200px;
    position:absolute;
    top:0;
    left:-180px;
}

注意

我使用letter-spacing来分隔字母和position以使其紧靠页面的一侧。 需要在页margin-top显示它。

示例： http ： //jsfiddle.net/jasongennaro/qkghV/

您可能也可以使它动态化，但这需要大量的计算！ ;-)