css challenge durante la rotazione (trasformazione: rotazione) blocco - larghezza auto

Question

Ho un piccolo problema con il blocco ruotato di 90 gradi usando la trasformazione css.

sfida sta nel seguente:

blocco ruotato è all'interno colonna 40px verticale. Ciò significa che la larghezza del blocco ruotato in modalità automatica non è superiore a 40px. Quindi il pezzo di testo non è posizionato su una riga continua, ma appaiono le interruzioni di riga.

per visualizzare meglio il problema si prega di controllare questo violino che ho creato: 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 
} 

Ho semplicemente bisogno di questo testo per essere un uno di linea. Qualche idea?

Answer 1

Se questo è ciò che si vuole

fiddle

Ecco il css solo aggiunto uno spazio bianco. Viene in linea continua. Se m manca un certo punto quindi si prega di cancellare

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

Controllare e fatemi sapere se mi manca qualche cosa

Answer 2

Basta rimuovere l'attributo di posizione da CSS: -

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

Answer 3

Credo che possiamo risolvere il problema utilizzando gli stili di sotto

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

nelle tipologie di cui sopra possiamo dare larghezza al 100% anche nel caso in cui vogliamo che l'intestazione occupi l'intero schermo.

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

Gli stili di cui sopra sono per il tag di ancoraggio.