css challenge при вращении (transform:rotate) блок - ширина авто

У меня небольшая проблема с поворотом блока на 90 градусов с помощью CSS-преобразования.

проблема заключается в следующем:

повернутый блок находится внутри вертикальной колонки 40px. Это означает, что ширина вращаемого блока в автоматическом режиме не превышает 40px. Таким образом, кусок текста не помещается на одну строку продолжения, вместо этого появляются разрывы строк.

чтобы лучше представить себе эту проблему, пожалуйста, проверьте эту скрипку я создал: 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
}

Мне просто нужно, чтобы этот текст был одной строкой. Есть идеи?

7
css css3 html rotation

3 ответов

Если это то, что вы хотите

скрипка

вот css только добавил пробел. Он приходит в continious линию. Если 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;
}

проверьте и дайте мне знать, если я пропустил что-то

14

просто удалите атрибут Position из CSS: -

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

Я думаю, что мы можем решить эту проблему, используя следующие стили

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

в вышеуказанных стилях мы можем дать ширину как 100% также в случае, если мы хотим, чтобы заголовок занимал весь экран.

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

вышеуказанные стили предназначены для тега привязки.

0