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

【问题标题】：CSS: adjusting spacing between letter according to container width?CSS：根据容器宽度调整字母之间的间距？
【发布时间】：2011-07-28 16:08:40
【问题描述】：

我有垂直旋转的 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 */
}

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

【问题讨论】：

你想要这个只有吗？我认为你必须使用 JavaScript...
无论如何我都在使用 jQuery，所以 javascript 没问题，但我不知道如何 :(
您也可以查看此答案以将字母间距调整为容器的宽度：stackoverflow.com/questions/5976289/…

标签： html text css letter-spacing

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：