He estado intentando que el texto vaya en una dirección vertical como podemos hacer en las tablas de ms-word, pero hasta ahora solo he podido hacer ESTO ... con lo que no estoy contento porque es un cuadro girado ... Isn ' ¿Hay alguna manera de tener texto en dirección vertical real?

Solo configuré la rotación en 305 grados en la demostración, lo que no hace que el texto sea vertical. 270deglo haré, pero solo hice la demostración para mostrar la rotación.

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

p { writing-mode: tb-rl; }

-webkit-transform: rotate(90deg);

Las otras respuestas son correctas pero provocaron algunos problemas de alineación. Al probar diferentes cosas, este código CSS funcionó perfectamente para mí.

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

Estaba buscando un texto vertical real y no el texto girado en HTML como se muestra a continuación. Entonces podría lograrlo usando el siguiente método.

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! Manifestación.

Actualizar: - Si necesita que se muestren los espacios en blanco , agregue la siguiente propiedad a su css.

white-space: pre;

Entonces, la clase css será

.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! Demostración con espacio en blanco

Actualización 2 (28-JUN-2015)

Dado que white-space: pre;no parece funcionar (para este uso específico) en Firefox (a partir de ahora), simplemente cambie esa línea a

white-space: pre-wrap;

Entonces, la clase css será

.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 con JsFiddle Demo FF.

Para rotar el texto 90 grados:

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

Además, parece que la etiqueta de intervalo no se puede rotar sin configurarla para mostrar: bloque.

Para texto vertical con caracteres uno debajo del otro en firefox, use:

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

Intente usar:

writing-mode: lr-tb;

Para mostrar texto en vertical (inferior-superior), simplemente podemos usar:

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>

Tenga en cuenta que podemos agregar esto para garantizar la compatibilidad del navegador:

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

también podemos leer más sobre la writing-modepropiedad aquí en los documentos de Mozilla.

Soy nuevo en esto, me ayudó mucho. Simplemente cambie el ancho, la altura, la parte superior e izquierda para que se ajuste:

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

También puede ir aquí y ver otra forma de hacerlo. El autor lo hace así:

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

la rotación, como lo hizo, es el camino a seguir, pero tenga en cuenta que no todos los navegadores lo admiten. Si no desea obtener una solución para varios navegadores, tendrá que generar imágenes para eso.

Puede usar la propiedad de transformación 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 */
}

Agregar la clase

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

}

Lo uso casi todos los días y no tuve ningún problema con él.

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

Me las arreglé para tener una solución funcional con esto:

(Tengo un título dentro de un div de clase middleItem)

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

Aquí hay un ejemplo de un código SVG que usé para colocar tres líneas de texto vertical en un encabezado de columna de tabla. Otros ángulos son posibles con algunos ajustes. Creo que la mayoría de los navegadores admiten SVG en estos días.

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

Puede lograr lo mismo con las siguientes propiedades CSS:

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

La mejor solución sería utilizar writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Define si las líneas de texto se colocan horizontal o verticalmente y la dirección en la que avanzan los bloques.

Tiene un buen soporte de navegador, pero no funcionará en IE8 (si te importa 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 quieres una alineación como

S
T
A
R
T

Luego siga https://www.w3.org/International/articles/vertical-text/#upright-latin

Ejemplo:

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>

Tenga en cuenta que el hindi tiene un acento en mi ejemplo y que se representará como un solo carácter. Ese es el único problema al que me enfrenté con esta solución.

De developer.mozilla.org

La propiedad CSS de orientación de texto establece la orientación de los caracteres de texto en una línea. Solo afecta al texto en modo vertical (cuando el modo de escritura no es horizontal-tb). Es útil para controlar la visualización de lenguajes que usan escritura vertical y también para hacer encabezados de tablas verticales.

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

También puede revisar toda la sintaxis aquí

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

Puede usar el ajuste de palabras: romper-palabra para obtener texto vertical, use el siguiente fragmento

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

HOLA

NOTA: Navegador compatible - Navegador IE (8,9,10,11) - Navegador Firefox (38,39,40,41,42,43,44) - Navegador Chrome (44,45,46,47,48) - Safari navegador (8,9) - navegador Opera (no compatible) - navegador Android (44)

Intente usar un archivo SVG, parece tener una mejor compatibilidad con el navegador y no romperá sus diseños receptivos.

Probé la transformación CSS y tuve muchos problemas con el origen de la transformación; y terminó yendo con un archivo SVG. Me tomó como 10 minutos y también pude controlarlo un poco con CSS.

Puede usar Inkscape para hacer el SVG si no tiene Adobe Illustrator.

Esto también funciona:

transform: rotate(90deg);

Puedes probar así

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

Esta es una solución un poco intrincada pero entre navegadores que no requiere CSS

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