Css call during rotation (conversion: rotation) block - width auto

Question

I have a slight problem with rotating the frame 90 degrees using css conversion.

The challenge is as follows:

The rotating block is inside a vertical column of 40 pixels. This means that the width of the rotary unit in automatic mode is not more than 40 pixels. Thus, the text fragment does not fit on one continuation line; instead, line breaks appear.

To better visualize this problem, check out this script I created: 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 } 

I just need this text to be one liner. Any ideas?

Answer 1

If this is what you want

fiddle

Here css only adds empty space. It comes in a continuous line. If m is missing at some point, then clear

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

Check and let me know if I missed something.

Answer 2

Just remove the Position attribute from the CSS: -

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

Answer 3

I think we can solve the problem using the styles below

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

In the above styles, we can provide the width as 100% even if we want the title to cover the entire screen.

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

The above styles apply to the anchor tag.