我怎样才能用CSS跨浏览器绘制垂直文本？

我想通过跨浏览器（> = IE6，> = Firefox 2，任何版本的Chrome，Safari或Opera）将单个文本字旋转90度。 如何才能做到这一点？

Answer 1

用最近的信息（来自CSS技巧 ）更新了这个答案。 荣誉马特和道格拉斯指出了filter的实施。

.rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; /* Should be unset in IE9+ I think. */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 

老答案：

对于FF 3.5或Safari / Webkit 3.1，请查看： -moz-transform （和-webkit-transform）。 IE有一个matrixfilter （V5.5 +），但我不知道如何使用它。 Opera还没有转换function。

 .rot-neg-90 { /* rotate -90 deg, not sure if a negative number is supported so I used 270 */ -moz-transform: rotate(270deg); -moz-transform-origin: 50% 50%; -webkit-transform: rotate(270deg); -webkit-transform-origin: 50% 50%; /* IE support too convoluted for the time I've got on my hands... */ } 

Answer 2

我正在使用以下代码在页面中编写垂直文本。 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); } 

Answer 3

另一个解决scheme是使用大多数浏览器支持的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

Answer 4

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

 <风格>
     .Rotate-90
     {
        显示：块;
        位置：绝对;
         right：-5px;
        顶部：15px;
         -webkit-transform：rotate（-90deg）;
         -moz-transform：rotate（-90deg）;
     }
 </样式>
 <！ -  [if IE]>
     <风格>
         .Rotate-90 {
             filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）;
            右：-15px; 顶：5px的;
         }
     </样式>
     <！[ENDIF]  - >

Answer 5

我在尝试使用纯CSS的时候遇到了问题 – 根据字体的不同，它看起来有点垃圾。 作为替代，你可以使用SVG / VML来做到这一点。 有些库可以帮助它轻松跨浏览器，例如Raphael和ExtJS 。 在ExtJS4中，代码如下所示：

  var drawComp = Ext.create('Ext.draw.Component', { renderTo: Ext.getBody(), //or whatever.. height: 100, width: 100 //ditto.. }); var text = Ext.create('Ext.draw.Component', { type: "text", text: "The text to draw", rotate: { x: 0, y: 0, degrees: 270 }, x: -50, y: 10 //or whatever to fit (you could calculate these).. }); text.show(true); 

这将工作在IE6 +和所有现代浏览器，但不幸的是，我认为你至less需要FF3.0。

Answer 6

如果你使用Bootstrap 3，你可以使用其中一个mixin：

 .rotate(degrees); 

例：

 .rotate(-90deg); 

Answer 7

CSS写模式模块引入垂直文本的正交stream。

只需使用具有所需值的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> 

Answer 8

我的解决scheme可以在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*/ }