Tenho tentado o texto ir na direção vertical, como fazemos nas tabelas de ms-word, mas até agora só consegui fazer ISSO ... com o que não estou feliz porque é uma caixa girada ... Não Existe uma maneira de ter um texto de direção vertical real?

Eu apenas defini a rotação para 305 graus na demonstração, o que não torna o texto vertical. 270degvai, mas eu só fiz a demonstração para mostrar a rotação.

Abordagem alternativa: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

-webkit-transform: rotate(90deg);

As outras respostas estão corretas, mas levaram a alguns problemas de alinhamento. Ao tentar coisas diferentes, esse código CSS funcionou perfeitamente para mim.

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

Eu estava procurando um texto vertical real e não o texto girado em HTML como mostrado abaixo. Então, eu poderia alcançá-lo usando o seguinte 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! Demo.

Atualizar: - Se você precisar que os espaços em branco sejam exibidos, adicione a seguinte propriedade ao seu css.

white-space: pre;

Então, a classe css deve 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! Demonstração com espaço em branco

Atualização 2 (28 de junho de 2015)

Uma vez que white-space: pre;não parece funcionar (para este uso específico) no Firefox (a partir de agora), basta alterar essa linha para

white-space: pre-wrap;

Então, a classe css deve 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.*/
}

JsFiddle Demo FF compatível.

Para girar o texto 90 graus:

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

Além disso, parece que a tag span não pode ser girada sem ser configurada para exibir: block.

Para texto vertical com caracteres um abaixo do outro no Firefox, use:

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

Tente usar:

writing-mode: lr-tb;

Para exibir o texto na vertical (parte inferior superior), podemos simplesmente 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>

Observe que podemos adicionar isso para garantir a compatibilidade do navegador:

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

também podemos ler mais sobre writing-modepropriedades aqui na documentação do Mozilla.

Sou novo nisso, me ajudou muito. Basta alterar a largura, altura, parte superior e esquerda para caber:

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

Você também pode ir aqui e ver outra maneira de fazer isso. O autor faz assim:

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

rotação, como você fez, é o caminho a percorrer - mas observe que nem todos os navegadores suportam isso. se você não quiser uma solução para vários navegadores, terá que gerar imagens para isso.

Pode usar a propriedade CSS3 Transform

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

Adicione a classe

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

}

Eu uso isso quase todos os dias e não tive nenhum problema com ele.

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

Eu consegui ter uma solução que funcionasse com isso:

(Eu tenho um título dentro de uma div de classe middleItem)

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

Aqui está um exemplo de algum código SVG que usei para colocar três linhas de texto vertical em um título de coluna de tabela. Outros ângulos são possíveis com um pouco de ajuste. Acredito que a maioria dos navegadores suporta SVG atualmente.

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

Você pode conseguir o mesmo com as propriedades CSS abaixo:

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

A melhor solução seria usar writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Ele define se as linhas de texto são dispostas horizontalmente ou verticalmente e a direção em que os blocos progridem.

Ele tem um bom suporte ao navegador, mas não funcionará no IE8 (se você se preocupa com o 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 você quiser um alinhamento como

S
T
A
R
T

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

Exemplo:

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>

Observe que o híndi tem um sotaque no meu exemplo e isso será processado como um único caractere. Esse é o único problema que enfrentei com esta solução.

De developer.mozilla.org

A propriedade CSS text-oriented define a orientação dos caracteres de texto em uma linha. Afeta apenas o texto no modo vertical (quando o modo de escrita não é horizontal-tb). É útil para controlar a exibição de idiomas que usam script vertical e também para fazer cabeçalhos de tabelas verticais.

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

Você também pode revisar toda a sintaxe aqui

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

Você pode usar quebra de linha: quebra de palavra para obter texto vertical, use o seguinte trecho

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

OLÁ

NOTA: Navegador compatível - 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 (não compatível) - navegador Android (44)

Tente usar um arquivo SVG, ele parece ter melhor compatibilidade com o navegador e não prejudica seus designs responsivos.

Tentei a transformação CSS e tive muitos problemas com a origem da transformação; e acabou indo com um arquivo SVG. Demorou cerca de 10 minutos e pude controlar um pouco com CSS também.

Você pode usar o Inkscape para fazer o SVG se não tiver o Adobe Illustrator.

Isso também funciona:

transform: rotate(90deg);

Você pode tentar assim

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

Esta é uma solução um pouco hacky, mas para vários navegadores que não requer CSS

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