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函数的plugin found here，虽然它适用于宽度而非高度（因此可能需要进行一些修改）：

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

Answer 2

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

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

2 个答案: