html - CSS：根据容器宽度调整字母之间的间距？

Question

我有垂直旋转的 span 元素，其中包含一些文本：

span{
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  height: 100%;
}

.container{
  width: 40px;
  height: 500px;  /* <- this can change */
}

我怎样才能使跨度中文本字母之间的间距根据容器的高度而变化？基本上我希望文本跨越元素的整个高度......

Answer 1

...某处，在很远的一个 javascript 文件中...

$(".container").each(function(idx, el) {
    $(el).css("letter-spacing", calculateSpacing(el, $(el).height()));        
});

您可以使用此处找到的插件，其中包含 calculateSpacing 函数，尽管它适用于宽度，而不是高度（因此可能需要进行一些修改）：

http://heychinaski.com/jquery/js/jquery.charjustify.js

Answer 2

我认为没有 javascrit 就无法做到这一点，因为 % 中的大小使用宽度而不是高度。编写一个脚本，将元素的高度除以其中的字符数，并将其设置为字母间距。