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

Question

我想显示一些旋转-90度的文字（比方说ABCDHFEJBF）。我把它放在一个跨度中并且做了

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

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

类似这样：100％的浏览器高度，固定在页面左侧，旋转，字符之间的间距需要变化，因此字母之间的空格随着浏览器高度的增加而增加。

如果有人能提供帮助，我们将不胜感激。

Answer 1

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

修改：显然它不需要百分比值。很高兴知道，所以更有理由看看JS位：P

如果需要，将此与一些简单的Javascript结合使用可以让您更好地控制间距 - 请参阅this fiddle以了解正在运行的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/

你也许可以让这种动态变得有活力，但这需要大量的计算！ ; - ）