J'ai un petit problème avec le bloc tournant à 90 degrés à l'aide de la transformation CSS.
Challenge se trouve dans ce qui suit:
Bloc rotaté est à l'intérieur de la colonne verticale de 40px. Cela signifie que la largeur du bloc rotatif en mode automatique n'est pas supérieure à 40px. Donc, le morceau de texte n'est pas placé sur une ligne continue, les pauses de ligne apparaissent.
Pour mieux visualiser ce problème, vérifiez ce violon que j'ai créé: Http:/jsfiddle.net/f7cex/ J'ai simplement besoin de ce texte pour être une doublure. Des idées?
3 Réponses :
Retirez simplement l'attribut de position de CSS: -
#sidebar-small {
width: 40px;
height: 100%;
left: 0;
top: 0;
}
Dans ce cas, vous devez spécifier à nouveau la largeur du conteneur Open_NAV;
Oui mais cela signifie que plus de contenu de largeur variable à l'intérieur du bouton! Alors mon problème n'a pas de solution?
Je pense que nous pouvons résoudre le problème en utilisant les styles ci-dessous dans les styles ci-dessus, nous pouvons donner une largeur comme 100% au cas où nous voulons que l'en-tête occupe l'en-tête occupant tout l'écran. . Les styles ci-dessus sont pour la balise d'ancrage.
Prenez la largeur de la barre latérale comme une donnée. La solution en modifiant la conception n'est pas une vraie solution. En outre, j'ai mentionné cette solution dans mon op, en expliquant que la largeur est le problème.
Si c'est ce que vous voulez
Fiddle P>
Voici le CSS uniquement Ajout de l'espace blanc. Il vient en ligne continue. Si m manque de point, veuillez effacer p>
Voici le CSS P>
#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;
}
Merci beaucoup . Heureux d'aider :)
Après toutes ces années, c'était exactement ce dont j'avais besoin. Solution très propre, peut être la plus propre. Votre blanc-espace: Nowrap forcé le contenu à une seule ligne et bas: ... PX m'a aidé à ajuster le point de départ et enfin Transform-Origine m'a aidé à ajuster où commencer à transformer.