垂直文本css如下图所示

Question

我想获得像上面图片一样的垂直文字的CSS。

但不喜欢这个 ^ h
Ø
ü
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

当你说“但不喜欢这个H O U R”时，我不明白你的意思，但可能的解决方案如下：

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

更多信息here

Answer 3

目前，IE是IE5.5及以上版本中唯一支持它的浏览器，IE8通过使用-ms扩展名添加了更多值。 IE5.5 +有4个值，IE8 +通过-ms扩展有4个值。

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?

我们可以使用transform属性在基于Webkit的浏览器，Firefox 3.5 +，Opera 11和IE9中执行此操作。

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

如果在浏览器中有效，结果应为：