動態填充垂直文本的樣式

我在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」），以便它總是出現在側邊欄的中心，無論長度如何都固定在頂部？

來源

2014-12-07 awnine

添加到'#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/

來源

2014-12-07 19:05:50

非常感謝，還有那90％，但是你是否知道句子的最後一個字母總是位於頂部的相同位置，即單詞「MENU」總是出現在相同的空間中？ – awnine 2014-12-08 03:00:48

我已經更新了我的答案。 – 2014-12-08 12:06:07

非常感謝，多數民衆贊成。我一直在嘗試「文本對齊：正確的」;但「方向」風格是需要的。 – awnine 2014-12-08 14:07:58

動態填充垂直文本的樣式

回答

相關問題