-webkit-transform: rotate(90deg);

другие ответы верны, но они привели к некоторым проблемам выравнивания. На пробовать разные вещи этот CSS кусок кода работал отлично для меня.

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

Я искал фактический вертикальный текст, а не повернутый текст в html, как показано ниже. Поэтому я мог бы достичь этого, используя следующий метод.

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! Демонстрация.

обновление:- Если вам нужны пробел для отображения, затем добавьте следующее свойство стиль CSS.

white-space: pre;

Итак, класс css должен быть

.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! Демо С Пробелами

обновление 2 (28-JUN-2015)

С white-space: pre; кажется, не работает (для этого конкретного использования) в Firefox(на данный момент), просто измените эту строку на

white-space: pre-wrap;

Итак, класс css должен быть

.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 Совместимый.

для поворота текста на 90 градусов:

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

кроме того, похоже, что тег span не может быть повернут без установки отображения:block.

для вертикального текста с символами один под другим в firefox используйте:

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

попробуйте использовать:

writing-mode: lr-tb;

вращение, как и вы, - это путь, но обратите внимание, что не все браузеры поддерживают это. если вы не хотите получить кросс-браузерное решение, вам придется создавать для этого изображения.

можно использовать 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 */
}

добавить класс

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

}

Я использую это в значительной степени каждый день и не было никаких проблем вообще с ним.

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

вот пример кода SVG, который я использовал для получения трех строк вертикального текста в заголовке столбца таблицы. Другие углы возможны с небольшой настройкой. Я считаю, что большинство браузеров поддерживают SVG в эти дни.

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

для отображения текста по вертикали (снизу вверх) мы можем просто использовать:

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>

Примечание мы можем добавить это, чтобы обеспечить совместимость браузера:

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

мы также можем прочитать больше о writing-mode собственность здесь Mozilla docs.

Я новичок в этом, это мне очень помогло. Просто измените ширину, высоту, верхнюю и левую, чтобы она соответствовала:

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

вы также можете перейти здесь и увидеть другой способ сделать это. Автор делает это так:

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

Это тоже работает:

transform: rotate(90deg);

лучшим решением было бы использовать writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

он определяет, будут ли строки текста выложены горизонтально или вертикально и направление, в котором блокируется прогресс.

Он имеет хорошую поддержку браузера, но не будет работать на IE8 (если вы заботитесь о IE) http://caniuse.com/#feat=css-writing-mode

мне удалось получить рабочее решение с этим:

(У меня есть название в классе middleItem div)

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

вы можете использовать word-wrap:break-word для получения вертикального текста используйте следующий фрагмент

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

Примечание: браузер поддерживается - Браузер IE (8,9,10,11) - Браузер Firefox (38,39,40,41,42,43,44) - Браузер Chrome (44,45,46,47,48) - Браузер Safari (8,9) - Браузер Opera (не поддерживается) - Android-браузер (44)

попробуйте использовать файл SVG, он, кажется, имеет лучшую совместимость с браузером и не будет нарушать ваши отзывчивые проекты.

Я попробовал преобразование CSS, и у меня было много проблем с transform-origin; и в конечном итоге пошел с файлом SVG. Это заняло около 10 минут, и я мог немного контролировать его с помощью CSS.

вы можете использовать Inkscape для создания SVG, если у вас нет 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>

Это немного хаки, но кросс-браузерное решение, которое не требует css

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