-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 CSS a parfaitement fonctionné 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;
}

Je cherchais un texte vertical réel et non le texte pivoté en HTML comme indiqué ci-dessous. Donc, je pourrais y parvenir en utilisant la méthode suivante.

HTML:-

<p class="vericaltext">
Hi This is Vertical Text!
</p>

CSS:-

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
}

JSFiddle! Démo.

Update: - Si vous avez besoin que les espaces soient affichés, ajoutez la propriété suivante à votre css.

white-space: pre;

Donc, la classe css doit être

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space: pre;/* this is for displaying whitespaces */
}

JSFiddle! Démo Avec Espace

Mise à jour 2 (28-JUN-2015)

Puisque white-space: pre; ne semble pas fonctionner (pour cet usage spécifique) sur Firefox (à partir de Maintenant), changez simplement cette ligne en

white-space: pre-wrap;

Donc, la classe css doit être

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
}

Jsfiddle Démo FF Compatible.

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 pivotée sans être définie sur display: block.

Pour le texte vertical avec des caractères l'un en dessous de l'autre dans firefox, utilisez:

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

Essayez d'utiliser:

writing-mode: lr-tb;

La Rotation, comme vous l'avez fait, est la voie à suivre - mais notez que tous les navigateurs ne le supportent pas. si vous ne voulez pas obtenir une solution multi-navigateur, vous devrez générer des images pour cela.

Peut utiliser la propriété de transformation CSS3

.txtdiv{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
  -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}

Ajouter la classe

.rotate {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);

}

J'utilise cela à peu près tous les jours et je n'ai eu aucun problème avec cela.

Https://css-tricks.com/snippets/css/text-rotation/

Voici un exemple de code SVG que j'ai utilisé pour obtenir trois lignes de texte vertical dans un en-tête de colonne de table. D'autres angles sont possibles avec un peu de peaufinage. Je crois que la plupart des navigateurs supportent SVG ces jours-ci.

<svg height="150" width="40">
  <text font-weight="bold" x="-150" y="10" transform="rotate(-90 0 0)">Jane Doe</text>
  <text x="-150" y="25" transform="rotate(-90 0 0)">0/0&nbsp;&nbsp;&nbsp;&nbsp;0/0</text>
  <text x="-150" y="40" transform="rotate(-90 0 0)">2015-06-06</text>
  Sorry, your browser does not support inline SVG.
</svg>

Pour afficher du texte en vertical (Bas-Haut), nous pouvons simplement utiliser:

writing-mode: vertical-lr; 

transform: rotate(180deg);

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}

<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

Note Nous pouvons ajouter ceci pour assurer la compatibilité du navigateur:

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

Nous pouvons également en savoir plus sur writing-mode propriété ici sur Mozilla docs.

Je suis nouveau à ça, ça m'a beaucoup aidé. Il suffit de changer la largeur, la hauteur, le haut et la gauche pour l'adapter:

.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}

Vous pouvez également aller ici {[6] } et voir une autre façon de le faire. L'auteur le fait comme ceci:

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

Cela fonctionne aussi:

transform: rotate(90deg);

Meilleure solution serait d'utiliser writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Il définit si les lignes de texte sont disposées horizontalement ou verticalement et la direction dans laquelle les blocs progressent.

Il a un bon support de navigateur, mais ne fonctionnera pas sur IE8 (si vous vous souciez de IE) http://caniuse.com/#feat=css-writing-mode

J'ai réussi à avoir une solution de travail avec ceci :

(j'ai un titre dans une div de classe middleItem)

.middleItem > .title{
    width: 5px;
    height: auto;
    word-break:break-all;
    font-size: 150%;
}

Vous pouvez utiliser word-wrap: break-word pour obtenir du texte vertical utiliser l'extrait suivant

HTML:

<div class='verticalText mydiv'>Here is your text</div>

Css:

.verticalText {
word-wrap: break-word;
  font-size: 18px;
}
.mydiv {
  height: 300px;
  width: 10px;
}

h1{word-break:break-all;display:block;width:40px;} 

H E L L O

Remarque: navigateur pris en charge - Navigateur IE (8,9,10,11) - Navigateur Firefox (38,39,40,41,42,43,44) - Navigateur Chrome (44,45,46,47,48) - Navigateur Safari (8,9) - Navigateur Opera (Non Pris En Charge) - Navigateur Android (44)

Essayez d'utiliser un fichier SVG, il semble avoir une meilleure compatibilité du navigateur, et ne cassera pas vos conceptions réactives.

J'ai essayé la transformation CSS, et j'ai eu beaucoup de problèmes avec la transform-origin; et j'ai fini par aller avec un fichier SVG. Cela a pris 10 minutes, et je pouvais le contrôler un peu avec CSS aussi.

Vous pouvez utiliser Inkscape pour créer le fichier SVG si vous N'avez pas Adobe Illustrator.

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}

<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

<style>
    #text_orientation{
        writing-mode:tb-rl;
        transform: rotate(90deg);
        white-space:nowrap;
        display:block;
        bottom:0;
        width:20px;
        height:20px;
    }
</style>
</head>
<body>

<p id="text_orientation">Welcome</p>
</body>

C'est une solution un peu hacky mais cross browser qui ne nécessite pas de css

<div>
    <div>h</div>
    <div>e</div>
    <div>l</div>
    <div>l</div>
    <div>o</div>
<div>