css défi lors de la rotation (transform:rotate) bloc - largeur de l'auto

J'ai un petit problème avec bloc de rotation de 90 degrés à l'aide de css transform.

Défi est le suivant:

Pivoter le bloc est à l'intérieur de 40px colonne verticale. Cela signifie que la largeur de la rotation de bloquer en mode auto n'est pas plus de 40px. Afin de partie du texte n'est pas placé sur une ligne continue, à la place des sauts de ligne apparaissent.

Pour mieux visualiser ce problème s'il vous plaît vérifier ce violon que j'ai créé: 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
}

J'ai simplement besoin de ce texte à une seule ligne. Des idées?

OriginalL'auteur | 2013-09-23

  1. 14

    Si c'est ce que vous voulez

    violon

    Voici le css n'a ajouté qu'un espace blanc. Il s'agit en continu de la ligne. Si m manquant un certain point, alors s'il vous plaît clair

    Voici le 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;
}

    Vérifier les et laissez-moi savoir si je suis absent quelque chose

    ah! comment se fait que je n'avais pas pensé à ça... 🙂 merci attribuer!
    Merci Beaucoup . Heureux de vous aider 🙂

    OriginalL'auteur Anobik

  2. 0

    Il suffit de supprimer l'attribut de Position du CSS:-

    #sidebar-small {
width: 40px;
height: 100%;
left: 0;
top: 0;
}
    bonne prise, mais si je veux le garder comme position_fixed?
    Dans ce cas, vous devez spécifier la Largeur de nouveau pour le open_nav conteneur;
    oui, mais cela signifie que pas plus de largeur variable contenu à l'intérieur de bouton! Donc mon problème n'a pas de solution?

    OriginalL'auteur N.P. SINGH

  3. 0

    Je pense que nous pouvons résoudre le problème en utilisant le dessous de styles

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

    Dans l'au-dessus de styles, nous pouvons donner une largeur de 100% dans le cas où nous voulons l'en-tête d'occuper la totalité de l'écran.

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

    Le au-dessus de styles sont pour la balise d'ancrage.

    Prendre la barre latérale largeur comme une donnée. Solution en changeant le design n'est pas une véritable solution. D'ailleurs je l'ai mentionné cette solution dans mon op, en expliquant que la largeur est le problème.

    OriginalL'auteur user2594152