J'ai essayé que le texte aille dans une direction verticale comme nous pouvons le faire dans les tableaux de ms-word, mais jusqu'à présent, je n'ai pu faire que CECI ... ce qui ne me satisfait pas car c'est une boîte tournée ... Isn ' Y a-t-il un moyen d'avoir un texte de direction verticale réelle?

Je ne règle la rotation que sur 305 degrés dans la démo, ce qui ne rend pas le texte vertical. 270degva mais je n'ai fait la démo que pour montrer la rotation.

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

p { writing-mode: tb-rl; }

-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 morceau 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 recherchais un texte vertical réel et non le texte pivoté en HTML comme indiqué ci-dessous. Je pourrais donc 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.

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

white-space: pre;

Ainsi, la classe css sera

.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 blanc

Mise à jour 2 (28-JUN-2015)

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

white-space: pre-wrap;

Ainsi, la classe css sera

.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.*/
}

Compatible avec JsFiddle Demo FF.

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);

De plus, il semble que la balise span ne puisse pas être tournée sans être définie sur display: block.

Pour le texte vertical avec des caractères les uns sous les autres dans Firefox, utilisez:

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

Essayez d'utiliser:

writing-mode: lr-tb;

Pour afficher le 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>

Notez que 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 la writing-modepropriété ici sur la documentation Mozilla.

Je suis nouveau dans ce domaine, cela m'a beaucoup aidé. Changez simplement 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 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;
}

la rotation, comme vous l'avez fait, est la voie à suivre - mais notez que tous les navigateurs ne le prennent pas en charge. si vous ne souhaitez pas obtenir une solution multi-navigateurs, vous devrez générer des images pour cela.

Peut utiliser la propriété Transform 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);

}

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

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

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

(J'ai un titre dans une division de classe middleItem)

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

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 tableau. D'autres angles sont possibles avec un peu d'ajustement. Je pense que la plupart des navigateurs prennent en charge 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>

Vous pouvez obtenir la même chose avec les propriétés CSS ci-dessous:

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

La 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 d'IE) http://caniuse.com/#feat=css-writing-mode

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

<!DOCTYPE html>
<html>
    <style>
        h2 {
           margin: 0 0 0 0;
           transform: rotate(270deg);
           transform-origin: top left;
           color: #852c98;
           position: absolute;
           top: 200px;
        }
    </style>
    <body>
        <h2>It’s all in the curd</h2>
    </body>
</html>

Si vous voulez un alignement comme

S
T
A
R
T

Suivez ensuite https://www.w3.org/International/articles/vertical-text/#upright-latin

Exemple:

div.vertical-sentence{
  -ms-writing-mode: tb-rl; /* for IE */
  -webkit-writing-mode: vertical-rl; /* for Webkit */
  writing-mode: vertical-rl;
  
}
.rotate-characters-back-to-horizontal{ 
  -webkit-text-orientation: upright;  /* for Webkit */
  text-orientation: upright; 
}

<div class="vertical-sentence">
  <p><span class="rotate-characters-back-to-horizontal" lang="en">Whatever</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="fr">Latin</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="hi">वर्डप्रेस </span></p>
</div>

Notez que l'hindi a un accent dans mon exemple et qui sera rendu comme un seul caractère. C'est le seul problème que j'ai rencontré avec cette solution.

Chez developer.mozilla.org

La propriété CSS d'orientation du texte définit l'orientation des caractères de texte dans une ligne. Il n'affecte que le texte en mode vertical (lorsque le mode d'écriture n'est pas horizontal-tb). Il est utile pour contrôler l'affichage des langues qui utilisent un script vertical, ainsi que pour créer des en-têtes de tableau verticaux.

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

Vous pouvez également consulter toute la syntaxe ici

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

Vous pouvez utiliser word-wrap: break-word pour obtenir le texte vertical utiliser après l'extrait de code

HTML:

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

css:

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

<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>

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

BONJOUR

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) - Safari navigateur (8,9) - navigateur Opera (non pris en charge) - navigateur Android (44)

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

J'ai essayé la transformation CSS et j'ai eu beaucoup de problèmes avec l'origine de la transformation; et a fini par aller avec un fichier SVG. Cela a pris environ 10 minutes et j'ai pu le contrôler un peu avec CSS aussi.

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

Cela fonctionne également:

transform: rotate(90deg);

Tu peux essayer comme ça

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

C'est une solution un peu hacky mais cross browser qui ne nécessite aucun CSS

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