如何使用CSS跨浏览器绘制垂直文本？

我的解决方案适用于Chrome，Firefox，IE9，IE10（根据您的要求更改度数）：

.rotate-text {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  filter: none; /*Mandatory for IE9 to show the vertical text correctly*/      
}

如果您使用Bootstrap 3，则可以使用其中之一的mixins：

.rotate(degrees);

例：

.rotate(-90deg);

另一种解决方案是使用SVG的文本节点这是大多数浏览器都支持。

<svg width="50" height="300">
    <text x="28" y="150" transform="rotate(-90, 28, 150)" style="text-anchor:middle; font-size:14px">This text is vertical</text>
</svg>

演示： https : //jsfiddle.net/bkymb5kr/

有关SVG文本的更多信息： http : //tutorials.jenkov.com/svg/text-element.html

我正在使用以下代码在页面中写入垂直文本。Firefox 3.5 +，Webkit，Opera 10.5+和IE

.rot-neg-90 {
    -moz-transform:rotate(-270deg); 
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin:  bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

该CSS写作模式模块引入了垂直文本正交流动。

只需使用writing-mode具有所需值的属性即可。

span { margin: 20px; }
#vertical-lr { writing-mode: vertical-lr; }
#vertical-rl { writing-mode: vertical-rl; }
#sideways-lr { writing-mode: sideways-lr; }
#sideways-rl { writing-mode: sideways-rl; }

<span id="vertical-lr">
  ↑ (1) vertical-lr 至<br />
  ↑ (2) vertical-lr 至<br />
  ↑ (3) vertical-lr 至
</span>
<span id="vertical-rl">
  ↓ (1) vertical-rl 至<br />
  ↓ (2) vertical-rl 至<br />
  ↓ (3) vertical-rl 至
</span>
<span id="sideways-lr">
  ↓ (1) sideways-lr 至<br />
  ↓ (2) sideways-lr 至<br />
  ↓ (3) sideways-lr 至
</span>
<span id="sideways-rl">
  ↓ (1) sideways-rl 至<br />
  ↓ (2) sideways-rl 至<br />
  ↓ (3) sideways-rl 至
</span>

我从http://snook.ca/archives/html_and_css/css-text-rotation改编而成：

<样式>
    。旋转90
    {
        显示：块；
        位置：绝对；
        右：-5px；
        顶部：15px；
        -webkit-transform：旋转（-90deg）;
        -moz-transform：旋转（-90deg）;
    }
</ style>
<！-[如果是IE]>
    <样式>
        .Rotate-90 {
            过滤器：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）;
            右：-15px; top：5px;
        }
    </ style>
    <！[endif]->