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

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

用最近的信息(来自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... */ } 

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

另一个解决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

我改编自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]  - >

我在尝试使用纯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。

如果你使用Bootstrap 3,你可以使用其中一个mixin:

 .rotate(degrees); 

例:

 .rotate(-90deg); 

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> 

我的解决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*/ }