css challenge when rotating (transform:rotate) block - width auto

Question

I've a little problem with block rotated 90 degrees using css transform.

Challenge lies in the following:

Rotated block is inside 40px vertical column. This means that width of the rotated block in auto mode is not more than 40px. So chunk of text is not placed on one continues line, instead line breaks appear.

To better visualise this problem please check this fiddle 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 simply need this text to be a one liner. Any ideas?

score 18 · Accepted Answer · answered Sep 26 '13 at 07:58

If this is what you want

fiddle

Here's the css only added white space. It comes in continious line. If m missing some point then please clear

Here's the 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 am missing some thing

After all of these years, this was exactly what I needed. Very clean solution, may be the cleanest. Your `white-space:nowrap` forced the content to be one line, and `bottom: ...px` helped me to adjust the starting point and lastly `transform-origin` helped me to adjust where to start transforming. — Mycodingproject, Feb 24 '20 at 08:51

N.P. SINGH · Answer 2 · 2013-09-23T18:13:29.633

0

Just remove the Position attribute from CSS:-

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

edited Sep 23 '13 at 18:13

answered Sep 23 '13 at 18:04

N.P. SINGH

303
1
4
15

In that case you need to specify Width again for the open_nav container; – N.P. SINGH Sep 23 '13 at 19:05
yes but that means no more variable width content inside button! So my problem has no solution? – Sep 23 '13 at 20:17

score 0 · Answer 3 · answered Sep 26 '13 at 06:18

I think we can solve the problem by using the below styles

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

In the above styles we can give width as 100% also in case we want the header to be occupying the whole 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 are for the anchor tag.

Take sidebar width as a given. Solution by changing the design is not a real solution. Besides I mentioned this solution in my op, by explaining that width is the problem. — , Sep 26 '13 at 07:15

css challenge when rotating (transform:rotate) block - width auto

3 Answers3

Linked