如何在css中旋转文本

如何在css中旋转文本以获取以下输出…

hi，

编辑：

感谢您的快速建议。我已经在jsfidle中添加了我的示例代码：

http://jsfiddle.net/koolkabin/yawYM/

我面临的问题是，当我们旋转文本，然后它打破对齐和位置…所以什么导致这和我如何管理他们？

解决方法

您需要使用CSS3 transform property rotate – see here，浏览器支持它和您需要使用的前缀。

webkit浏览器的一个示例是-webkit-transform：rotate(-90deg);

编辑：问题改变了，所以我添加了一个demo在Chrome / Safari中工作(因为我只包括-webkit- CSS前缀规则)。你有的问题是，你不想旋转标题div，而只是它里面的文本。如果您删除旋转，则< div> s位于正确的位置，您所需要做的就是将文本包装在元素中，而不是旋转。

作为jQuery UI的一部分，已经存在一个更加可定制的小部件 – 参见accordion演示页面。我相信有一些CSS聪明，你应该能够使手风琴垂直和旋转标题文本:-)

编辑2：我已经预料到文本中心问题，已经updated my demo.有一个高度/宽度约束虽然，所以更长的文本仍然可以打破布局。

编辑3：看起来水平版本是original plan的一部分，但我看不到任何方式配置它在演示页。我不正确…新的手风琴是即将到来的jQuery UI 1.9的一部分！所以你可以尝试开发构建如果你想要的新功能。

希望这可以帮助！