動態填充垂直文本的樣式

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/