css dönüşürken döndürme (dönüşme: döndürme) blok - genişlik otomatik

Question

CSS dönüştürmesi kullanılarak 90 derece döndürülen blokla ilgili bir sorunum var.

meydan aşağıdaki yatmaktadır:

Döndürülmüş blok içinde 40px dikey sütundur. Bu, otomatik modda döndürülen bloğun genişliğinin 40px'den fazla olmadığı anlamına gelir. Bu yüzden bir metin devam etmekte olan bir satır üzerine yerleştirilmemektedir, bunun yerine satır sonları görünmektedir.

daha iyi bu sorun benim yarattığım bu keman kontrol ediniz görselleştirmek için: 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 
} 

Ben sadece bir liner olmak için bu metin gerekir. Herhangi bir fikir?

Answer 1

Burada sadece beyaz boşluk eklenen css var. Sürekli çizgi geliyor. m bazı noktayı eksik sonra

İşte temizlemek 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; 
} 

kontrol var ve bana bildirin bazı şey

Answer 2

Sadece CSS'den pozisyonu özelliğini kaldırın: -

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

Answer 3

ben biz% 100 olarak genişliği verebilir aşağıda stillerinize Yukarıdaki stillerde

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

kullanarak sorunu çözebilir düşünüyorum Ayrıca, başlığın tüm ekranı kaplamasını istiyoruz.

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

Yukarıdaki stiller bağlantı etiketi içindir. bu

fiddle

istediğiniz buysa