css Herausforderung beim Drehen (Transform: Drehen) Block - Breite Auto

Question

Ich habe ein kleines Problem mit Block um 90 Grad gedreht mit CSS-Transformation.

Herausforderung liegt in folgendem:

Rotated Block ist innerhalb 40px vertikale Spalte. Dies bedeutet, dass die Breite des gedrehten Blocks im automatischen Modus nicht mehr als 40 Pixel beträgt. Ein Textabschnitt wird also nicht auf eine fortlaufende Zeile gesetzt, stattdessen werden Zeilenumbrüche angezeigt.

Um besser zu visualisieren dieses Problem bitte diese Geige prüfe ich erstellt: 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 
} 

Ich brauche einfach diesen Text ein Motto zu sein. Irgendwelche Ideen?

Answer 1

Wenn das, was Sie wollen

fiddle

Hier ist die CSS nur Leerraum hinzugefügt. Es kommt in kontinuierlicher Linie. Wenn m einen Punkt fehlt dann löschen Sie bitte

Hier ist die 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; 
} 

überprüfen und lassen Sie mich wissen, ob ich irgendeine Sache

Answer 2

einfach die Position Attribut von CSS entfernen: -

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

Answer 3

Ich denke, dass wir das Problem lösen können

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

In den oben genannten Arten der unten angegebenen Arten durch den Einsatz können wir Breite als 100% geben auch für den Fall, dass die Kopfzeile den gesamten Bildschirm einnehmen soll.

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

Die oben genannten Stile sind für das Anker-Tag.