将文本从水平位置旋转到垂直位置

时间:2009-02-04 15:56:27

标签: jquery html css

是否可以在不使用闪光灯的情况下将文字从水平位置旋转到单个点的垂直位置?所以我会倾向于通过倾斜我的头来阅读相同的文字。

我以为你可以在jquery中做到这一点,但找不到插件。

7 个答案:

答案 0 :(得分:5)

我使用纯CSS,它对我来说非常好,这是代码:

<div style="-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); z-index:inherit; float:left">Not at all</div>

答案 1 :(得分:4)

我记得我自己也在研究这个问题并发现它真的是黑客或者不可能。

IE允许

<div STYLE="writing-mode: tb-rl">Content rendered vertically</div> 

但AFAIK在其他任何地方都不起作用(当然不适用于FF 3)。

最好的解决方案似乎是使用图像(可能是动态生成的)。很抱歉没有更多的帮助!

答案 2 :(得分:3)

CSS将允许......

-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation = 3);

元素也必须显示:block。

答案 3 :(得分:2)

您可能不得不使用SVG而不是HTML - 当然,并非所有浏览器都支持SVG,有些浏览器比其他浏览器更好。

答案 4 :(得分:0)

我不知道是否有任何帮助,但您可以分两步完成:

  • 使用像php这样的服务器端解决方案将文本转换为图像
  • 使用jquery插件(例如jquery-rotate)
  • 旋转图像

问题是结果是图像,而不再是文本。

答案 5 :(得分:0)

webkit提出了一些新的CSS specifications。它们目前仅在他们的夜间和Apple的Safari 4开发者预览版中实现。

答案 6 :(得分:0)

我自己就这个主题提出了几个问题......

您可以使用动态图片执行此操作 - 尽管that has its problems (C# example)

您也可以在IE中使用CSS执行此操作。

新的CSS会在最新的Safari,Chrome和FX don't quite work either (includes example)中进行转换。