动态填充垂直文本的样式

Question

我在fullscreen.js旁边使用了一个侧边栏，它检测哪个节当前处于活动状态/正在查看，并沿垂直轴显示旋转90度的标题。

由于文字是动态的，因此长度会有所不同。当文本旋转时，这会导致样式问题：文本越长，它出现的左边距越远，溢出边界。

如果您使用鼠标滚轮移动donw在这个例子中的几个部分，你会看到发生了什么： http://jsfiddle.net/pLjrbcL7/2/

一些我使用的样式此元素的CSS的是在这里：

.vertical-text { 
-ms-transform: rotate(270deg); 
-moz-transform: rotate(270deg); 
-webkit-transform: rotate(270deg); 
transform: rotate(270deg); 
font-family:'Raleway', sans-serif; 
float: left; 
font-weight: 300; 
font-size:12px; 
} 

#titleposition { 
position: absolute; 
top: 160px; 
left:5px; 
white-space: nowrap; 
} 

即时通讯使用白色空间：nowrap强制所有的文本出现在一行上。

我该如何设置这个span（id =“collapsedsectiontitle”），以便它总是出现在侧边栏的中心，无论长度如何都固定在顶部？

Answer 1

添加到'#titleposition'top: 200px;（或与'#menuarrow'的其他距离以防止职位冲突）。 给它也left :50%;把它放在'#undermenu'的中间。 也给'.vertical-text'position: absolute;，并用width: 100%;代替float: left;。 您的要求，使从右侧“#titleposition”开始的文字，给它direction: rtl;，所以我们必须：

#titleposition 
{ 
    position: absolute; 
    top: 200px; 
    left:50%; 
    white-space: nowrap; 
    direction: rtl; 
} 

.vertical-text 
{ 
    -ms-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -webkit-transform: rotate(270deg); 
    transform: rotate(270deg); 
    font-family:'Raleway', sans-serif; 
    position: absolute; 
    width: 100%; 
    font-weight: 300; 
    font-size:12px; 
} 

新的结果：http://jsfiddle.net/pLjrbcL7/4/