wyzwanie css podczas obracania (transformacja: obracanie) bloku - szerokość auto

Question

Mam mały problem z blokiem obróconym o 90 stopni za pomocą transformacji css.

wyzwaniem jest następujące:

Obrócona blok jest wewnątrz kolumny 40px pionowy. Oznacza to, że szerokość obróconego bloku w trybie automatycznym nie jest większa niż 40 pikseli. Tak więc fragment tekstu nie jest umieszczony na jednej linii kontynuacji, zamiast tego pojawiają się linie podziału.

Aby lepiej uzmysłowić ten problem proszę sprawdzić ten skrzypce I Utworzono: http://jsfiddle.net/F7CEX/

#open_nav { 
    font-family: 'Exo', sans-serif; 
    font-weight: 300; 
    font-size: 1em; 
    display: block; 
    color: #333333; 
    text-decoration: none; 
    background: url("img/menu-s.png") no-repeat 18px -30px transparent; 
    padding-left: 50px; 
    padding-right: 19px; 
    line-height: 40px; 
    position: absolute; 
    bottom: 18px; 
    -webkit-transform: rotate(-90deg); 
    -webkit-transform-origin: 20px; 
    -moz-transform: rotate(-90deg); 
    -moz-transform-origin: 20px; 
    -ms-transform: rotate(-90deg); 
    -ms-transform-origin: 20px; 
    -o-transform: rotate(-90deg); 
    -o-transform-origin: 20px; 
    transform: rotate(-90deg); 
    transform-origin 
} 

po prostu trzeba ten tekst być jeden liner. Jakieś pomysły?

Answer 1

Jeśli to, co chcesz

fiddle

Oto css tylko dodaje spacje. Pojawia się w ciągłej linii. Jeśli m brakuje jakiś punkt następnie wyczyść

Oto css

#sidebar-small { 
width: 40px; 
height: 100%; 
position: fixed; 
left: 0; 
top: 0; 
} 

#open_nav { 
white-space:nowrap; 
font-family: 'Exo', sans-serif; 
font-weight: 300; 
font-size: 1em; 
display: block; 
color: #333333; 
text-decoration: none; 
background: url("img/menu-s.png") no-repeat 18px -30px transparent; 
padding-left: 50px; 
padding-right: 19px; 
line-height: 40px; 
position: absolute; 
bottom: 18px; 
-webkit-transform: rotate(-90deg); 
-webkit-transform-origin: 20px; 
-moz-transform: rotate(-90deg); 
-moz-transform-origin: 20px; 
-ms-transform: rotate(-90deg); 
-ms-transform-origin: 20px; 
-o-transform: rotate(-90deg); 
-o-transform-origin: 20px; 
transform: rotate(-90deg); 
transform-origin: 20px; 
} 

Sprawdź i daj mi znać, jeśli brakuje mi pewne rzeczy

Answer 2

Wystarczy usunąć atrybut Pozycja z CSS: -

#sidebar-small { 
width: 40px; 
height: 100%; 
left: 0; 
top: 0; 
} 

Answer 3

myślę, że możemy rozwiązać ten problem za pomocą poniższej Style

#sidebar-small { 
height: 250px; 
left: 0; 
position: fixed; 
top: 0; 
width: 250px; 
} 

w powyższych stylów możemy dać szerokość jako 100% na wypadek gdybyśmy chcieli, aby nagłówek zajmował cały ekran.

#open-nav{ 
bottom: 8px; 
left: 10px; 
position: absolute; 
color: #333333; 
font-family: 'Exo',sans-serif; 
font-size: 1em; 
line-height: 40px; 
padding-left: 20px; 
padding-right: 20px; 
text-decoration: none; 
-webkit-transform: rotate(-90deg); 
-webkit-transform-origin: 20px; 
-moz-transform: rotate(-90deg); 
-moz-transform-origin: 20px; 
-ms-transform: rotate(-90deg); 
-ms-transform-origin: 20px; 
-o-transform: rotate(-90deg); 
-o-transform-origin: 20px; 
transform: rotate(-90deg); 
transform-origin: 20px; 
} 

Powyższe style dotyczą znacznika kotwicy.