Ho provato a far andare il testo in una direzione verticale come possiamo fare nelle tabelle ms-word, ma finora sono stato in grado di fare solo QUESTO ... di cui non sono soddisfatto perché è una casella ruotata ... Isn ' C'è un modo per avere un testo in direzione verticale reale?

Ho impostato solo la rotazione a 305 gradi nella demo che non rende il testo verticale. 270degma ho fatto la demo solo per mostrare la rotazione.

Approccio alternativo: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

-webkit-transform: rotate(90deg);

Le altre risposte sono corrette ma hanno portato ad alcuni problemi di allineamento. Provando cose diverse, questo codice CSS ha funzionato perfettamente per me.

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

Stavo cercando un testo verticale effettivo e non il testo ruotato in HTML come mostrato di seguito. Quindi ho potuto ottenerlo utilizzando il seguente metodo.

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! Demo.

Aggiornamento: - Se hai bisogno che gli spazi bianchi vengano visualizzati, aggiungi la seguente proprietà al tuo css.

white-space: pre;

Quindi, la classe CSS deve essere

.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! Demo con spazi bianchi

Aggiornamento 2 (28-JUN-2015)

Dal momento che non white-space: pre;sembra funzionare (per questo uso specifico) su Firefox (al momento), basta cambiare quella riga in

white-space: pre-wrap;

Quindi, la classe CSS deve essere

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

Compatibile con JsFiddle Demo FF.

Per ruotare il testo di 90 gradi:

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

Inoltre, sembra che il tag span non possa essere ruotato senza essere impostato su display: block.

Per il testo verticale con caratteri uno sotto l'altro in Firefox, utilizzare:

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

Prova a usare:

writing-mode: lr-tb;

Per visualizzare il testo in verticale (Bottom-top) possiamo semplicemente usare:

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>

Nota che possiamo aggiungere questo per garantire la compatibilità del browser:

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

possiamo anche leggere di più sulla writing-modeproprietà qui sulla documentazione di Mozilla.

Sono nuovo in questo, mi ha aiutato molto. Basta cambiare larghezza, altezza, in alto e a sinistra per adattarlo:

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

Puoi anche andare qui e vedere un altro modo per farlo. L'autore lo fa in questo modo:

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

la rotazione, come hai fatto tu, è la strada da percorrere, ma nota che non tutti i browser lo supportano. se non vuoi ottenere una soluzione cross-browser, dovrai generare immagini per questo.

Può usare la proprietà 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 */
}

Aggiungi la classe

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

}

Lo uso praticamente tutti i giorni e non ho avuto alcun problema con esso.

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

Sono riuscito ad avere una soluzione funzionante con questo:

(Ho un titolo all'interno di un div della classe middleItem)

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

Ecco un esempio di codice SVG che ho usato per inserire tre righe di testo verticale nell'intestazione di una colonna della tabella. Altri angoli sono possibili con un po 'di aggiustamenti. Credo che la maggior parte dei browser supporti SVG in questi giorni.

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

Puoi ottenere lo stesso risultato con le seguenti proprietà CSS:

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

La soluzione migliore sarebbe usare writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Definisce se le righe di testo sono disposte orizzontalmente o verticalmente e la direzione in cui i blocchi avanzano.

Ha un buon supporto per i browser, ma non funzionerà su IE8 (se ti interessa 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>

Se vuoi un allineamento come

S
T
A
R
T

Quindi segui https://www.w3.org/International/articles/vertical-text/#upright-latin

Esempio:

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>

Nota che l'hindi ha un accento nel mio esempio e verrà visualizzato come un singolo carattere. Questo è l'unico problema che ho dovuto affrontare con questa soluzione.

Da developer.mozilla.org

La proprietà CSS di orientamento del testo imposta l'orientamento dei caratteri di testo in una riga. Ha effetto solo sul testo in modalità verticale (quando la modalità di scrittura non è orizzontale-tb). È utile per controllare la visualizzazione delle lingue che utilizzano la scrittura verticale e anche per creare intestazioni di tabelle verticali.

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

Puoi anche rivedere tutta la sintassi qui

/* 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;

Puoi usare il ritorno a capo automatico: break-word per far sì che il testo verticale utilizzi lo snippete

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

CIAO

NOTA: Browser supportato - Browser IE (8,9,10,11) - Browser Firefox (38,39,40,41,42,43,44) - Browser Chrome (44,45,46,47,48) - Safari browser (8,9) - Browser Opera (non supportato) - Browser Android (44)

Prova a utilizzare un file SVG, sembra avere una migliore compatibilità del browser e non interromperà i tuoi progetti reattivi.

Ho provato la trasformazione CSS e ho avuto molti problemi con l'origine della trasformazione; e ha finito per andare con un file SVG. Ci sono voluti circa 10 minuti e ho potuto controllarlo un po 'anche con i CSS.

Puoi usare Inkscape per creare SVG se non hai Adobe Illustrator.

Funziona anche questo:

transform: rotate(90deg);

Puoi provare in questo modo

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

Questa è una soluzione un po 'hacky ma cross browser che non richiede CSS

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