Вертикальный текст CSS, как показано ниже

Question

Я хочу получить css для текста, как на картинке выше.

но не так
H
O
U
R

Answer 1

@ джон;вы можете использовать css3 transform для этого css:

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

проверьте это для более http://snook.ca/archives/html_and_css/css-text-rotation

css3 transform свойство не поддерживается IE так что вы не можете использовать IE rotation filter

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

проверить эту скрипку http://jsfiddle.net/4Zb38/

Answer 2

Я не понимаю, что вы имеете в виду, когда говорите "но не как этот ЧАС", но возможное решение заключается в следующем:

div {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    display: inline;
    font-size: 10px;
}

Демо: http://jsfiddle.net/vndAT/1

Используя transform:(rotate(<angle>), вы можете повернуть любой элемент на нужный вам угол.Вышеуказанные префиксы поддерживают механизмы разметки webkit, gecko и presto.

Для Internet Explorer возможное решение: filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=<value>);

Подробнее здесь

Answer 3

На данный момент IE - единственный браузер, поддерживающий его, начиная с IE5.5 и выше, IE8 добавляет дополнительные значения с помощью расширения -ms. В IE5.5 + доступно 4 значения и еще 4 в IE8 + через расширение -ms.

lr-tb – This is the default value, left to right, top to bottom
rl-tb – This flows the text from right to left, top to bottom
tb-rl – Flows the text vertically from top to bottom, right to left
bt-rl – bottom to top, right to left
tb-lr – This and the followings value are only available in IE8+ using -ms-writing-mode. Text flows top to bottom, left to right
bt-lr – Bottom to top, left to right
lr-bt – Left to right, bottom to top
rl-bt – Right to left, bottom to top
Rotate text in other browsers?

мы можем сделать это в браузерах на основе Webkit, Firefox 3.5+, Opera 11 и IE9, используя свойство transform.

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

LIKE:

В разделе укажите свой CSS:

<style>
<!--
.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}
-->
</style>

И в тело:

<div class="verticaltext">Test-1</div>

Результат, если он работает в вашем браузере, должен быть: