Direction du texte vertical

Question

J'ai essayé le texte pour aller dans une direction verticale comme nous pouvons le faire en ms-word tables mais jusqu'à présent, je n'ai été en mesure de le faire... CE que je ne suis pas heureux avec parce que c'est une boîte tournée... n'y a-t-il pas un moyen d'avoir le texte de direction verticale réelle ?

Je n'ai réglé la rotation que sur 305 degrés dans la démo, ce qui ne rend pas le texte vertical. 270deg le feront, mais j'ai seulement fait la démo pour montrer la rotation.

Answer 1

Approche alternative : http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

Answer 2

-webkit-transform: rotate(90deg);

Les autres réponses sont correctes, mais elles ont conduit à des problèmes d'alignement. En essayant différentes choses, ce code de pièce CSS a fonctionné parfaitement pour moi.

.vertical{
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
}

Answer 3

Pour faire pivoter le texte de 90 degrés :

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

En outre, il semble que la balise span ne peut pas être tournée sans être définie pour afficher :block.

Answer 4

Pour un texte vertical avec des caractères les uns au-dessous des autres dans firefox, utilisez :

text-orientation: upright;
writing-mode: vertical-rl;