css回転時のチャレンジ（変換：回転）ブロック幅自動

Question

CSS変換を使用して90度回転されたブロックで少し問題がありました。

チャレンジは、以下である：

回転されたブロックは、40ピクセル垂直列の内部にあります。これは、自動モードでの回転ブロックの幅が40ピクセル以下であることを意味します。したがって、テキストのチャンクは1つのcontinue行に置かれるのではなく、改行が表示されます。よりよいこの問題を可視化する

私が作成したこのフィドルチェックしてください：私は単にこのテキストは1つのライナーする必要が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 
} 

を。何か案は？

Answer 1

これはあなたが

fiddle

たいものである場合はここでCSSは空白のみを追加します。それは連続的な線で来る。 mは、いくつかのポイントを逃した場合、

はここでクリア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; 
} 

チェックだと私に教えて、私はいくつかのこと

Answer 2

ただ、CSSからの位置属性を削除： -

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

Answer 3

私は、我々は100％と幅を与えることができ、以下のスタイルに上記のスタイルで

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

を使用して問題を解決することができると思いますヘッダーを画面全体に表示したい場合にも使用します。

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

上記のスタイルはアンカータグ用です。