동적으로 채워지는 세로 텍스트 스타일링

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; 
} 

메신저 white-space : nowrap를 사용하면 모든 텍스트를 한 줄에 표시 할 수 있습니다.

이 스팬 (id = "collapsedsectiontitle")은 길이에 상관없이 상단에 고정 된 사이드 바 중앙에 항상 표시되도록 어떻게 스타일링 할 수 있습니까?

Answer 1

'#titleposition'top: 200px; (또는 '#menuarrow'과 다른 위치에서 충돌이 발생하지 않도록)까지 추가하십시오. '#undermenu'의 중간에 배치하려면 left :50%;으로 지정하십시오. '.vertical-text'position: absolute;도주고 float: left;을 width: 100%;으로 대체하십시오. 요청이 오른쪽에서 '#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/