我如何用CSS跨浏览器绘制垂直文本?

我想将单个文本单词旋转90度，支持跨浏览器(>= IE6， >= Firefox 2，任何版本的Chrome, Safari或Opera)。如何做到这一点呢?

239606 次浏览
小开
最佳答案

更新这个答案与最近的信息(从CSS技巧)。感谢Matt和Douglas指出了过滤器实现。

.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有矩阵滤波器(v5.5+)，但我不确定如何使用它。Opera还没有转换功能。

.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... */
}
小开

我从http://snook.ca/archives/html_and_css/css-text-rotation改编了这个:

<style>
.Rotate-90
{
display: block;
position: absolute;
right: -5px;
top: 15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
</style>
<!--[if IE]>
<style>
.Rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
right:-15px; top:5px;
}
</style>
<![endif]-->
小开

我使用以下代码在页面中写入垂直文本。 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 -取决于字体，它可以看起来有点垃圾。作为一种替代方法，您可以使用SVG/VML来实现它。有一些库可以帮助它轻松地跨浏览器，例如拉斐尔和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+和所有现代浏览器中工作，然而，不幸的是，我认为你至少需要FF3.0。

小开

我的解决方案，将工作在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

小开

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>

小开

如果CSS 写入方式: sideways-lr是你更喜欢的，你碰巧运行到基于铬/铬的浏览器。你可以试试

{
writing-mode: vertical-rl;
transform: rotate(180deg);
}

所以现在所有的浏览器都支持它。

参考:https://bugs.chromium.org/p/chromium/issues/detail?id=680331#c4


提交答案