2011-04-03 141 views
2

我已经垂直旋转span元素,在它的一些文字:CSS:根据容器宽度调整字母之间的间距?

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

我怎样才能使它所以从根据容器的高度跨度变化的文字字母之间的间距?基本上我想要的文本跨越整个元素的高度...

+1

你想用CSS _only_?我认为你必须使用JavaScript ... – Czechnology 2011-04-03 15:19:17

+0

我使用jQuery无论如何,所以JavaScript是好的,但我不知道如何:( – Alex 2011-04-03 17:48:54

+0

你也可以看看这个答案调整字母间距到容器的宽度:http://stackoverflow.com/questions/5976289/stretch-text-to-fit-width-of-div/23168507#23168507 – 2014-11-14 18:23:53

回答

4

...某处,在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

3

我认为你不能没有javascrit它,因为尺寸在%使用宽度,但不是高度。 编写一个脚本,将元素的高度除以里面的字符数,并将其设置为字母间距。