CSS: adjusting spacing between letter according to container width?

问题

I have vertically rotated span element with some text in it:

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 */
}

How can I make it so the spacing between the letters of the text from the span changes depending on the container's height? Basically I want the text to span over the entire height of the element...

回答1:

...somewhere, in a javascript file far far away...

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

You can use the plugin found here, which contains the calculateSpacing function, albeit it works on width, not height (so some modification may be necessary):

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

回答2:

I think you can't do it without javascrit, because sizes in % use width but not height. Write a script that divide the height of the element by the number of chars inside and set it as letter-spacing.

来源：https://stackoverflow.com/questions/5530375/css-adjusting-spacing-between-letter-according-to-container-width