如何在css中旋转文本 [英] How do i rotate text in css

问题描述

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

编辑：

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

http ：//jsfiddle.net/koolkabin/yawYM/

我面临的问题是，当我们旋转文本时，它会破坏对齐和位置。

解决方案

您需要使用CSS3 transform属性 rotate - 这里，浏览器支持它和您需要使用的前缀。

一个例子对于webkit浏览器是 -webkit-transform：rotate（-90deg）;

strong>问题发生了重大变化，因此我添加了一个 演示 ，可在Chrome / Safari中使用只包括 -webkit - CSS前缀规则）。您遇到的问题是，您不想旋转 title div ，而只是旋转其中的文本。如果你删除你的旋转，< div> s在正确的位置，所有你需要做的是将文本包装在一个元素，旋转它。 p>

作为jQuery UI的一部分，已经存在一个可自定义的小部件 - 请参阅手风琴演示页。我确信有一些CSS聪明，你应该能够使手风琴垂直，并旋转标题文本： - ）

编辑2：我已经预料到文本中心问题，并已经更新了我的演示。

编辑3： 它看起来像是一个高度/宽度约束，水平版本是原始计划的一部分，但我在演示页面上看不到任何配置方式。 我不正确…新手风琴是即将推出的 jQuery UI 1.9的一部分！所以，如果你想要新的功能，你可以尝试开发构建。

希望这有助于！

How do i rotate text in css to get following output...

hi,

Edit:

Thanks for quick suggestion. I have added my sample code in jsfidle:

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

The problem i am facing is that when we rotate the text then it breaks the alignment and positions... so what is causing that and how can i manage them?

解决方案

You need to use the CSS3 transform property rotate - see here for which browsers support it and the prefix you need to use.

One example for webkit browsers is -webkit-transform: rotate(-90deg);

Edit: The question was changed substantially so I have added a demo that works in Chrome/Safari (as I only included the -webkit- CSS prefixed rules). The problem you have is that you do not want to rotate the title div, but simply the text inside it. If you remove your rotation, the <div>s are in the correct position and all you need to do is wrap the text in an element and rotate that instead.

There already exists a more customisable widget as part of the jQuery UI - see the accordion demo page. I am sure with some CSS cleverness you should be able to make the accordion vertical and also rotate the title text :-)

Edit 2: I had anticipated the text center problem and have already updated my demo. There is a height/width constraint though, so longer text could still break the layout.

Edit 3: It looks like the horizontal version was part of the original plan but I cannot see any way of configuring it on the demo page. I was incorrect… the new accordion is part of the upcoming jQuery UI 1.9! So you could try the development builds if you want the new functionality.

Hope this helps!

这篇关于如何在css中旋转文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！