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

我想显示一些旋转-90度的文本（比如ABCDHFEJBF）。我把它放在一个跨度内，然后做了

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

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

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

---

如果有人能帮上忙，我们将不胜感激。

你想做的事都可以做到。。。但是如果没有脚本，每次都需要设置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;
}

注意

我使用

字母间距

分隔字母，并将其放置在页面的侧面<代码>页边距顶部需要使其显示在页面上

示例：

---

您可能也可以将其动态化，但这需要大量计算！！；-）

CSS具有

字母间距

，可用于指定字母之间的间距。将此设置为百分比值将使您获得想要的效果

编辑：显然它不需要百分比值。很高兴知道，所以有更多的理由来看看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>

$（文档）.ready（函数（）
{
$（窗口）。调整大小（函数（）
{
变量间距=数学地板（$（this）.height（）/70）+“px”；
$（'span'）.css（'字母间距'，间距）；
$（“#间距”）.html（间距）；
});
});
你好

但这不会随浏览器高度调整。同意@tw16。正如我提到的，这是css位。基于

高度

使其动态化需要比我的大脑现在所需要的更多的计算。但这是行动的开始