如何在css中旋转文本 [英] How do i rotate text in css
问题描述
如何在css中旋转文本以获取以下输出...
编辑:
感谢您的快速建议。我已经在jsfidle中添加了我的示例代码:
http: //jsfiddle.net/koolkabin/yawYM/
我面临的问题是,当我们旋转文本时,它会破坏对齐和位置。
您需要使用CSS3 transform属性 rotate
- 请参阅这里,浏览器支持它和您需要使用的前缀。
webkit浏览器是 -webkit-transform:rotate(-90deg);
>问题发生了重大变化,因此我在Chrome / Safari中添加了一个 演示 包括 作为jQuery UI的一部分,已经存在一个可自定义的小部件 - 请参阅手风琴演示页。我相信有一些CSS聪明,你应该能够使手风琴垂直,并旋转标题文本: - ) 编辑2:我已经预料到文本中心问题,并已经更新了我的演示。 编辑3: 希望这有助于! 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 One example for webkit browsers is Edit: The question was changed substantially so I have added a demo that works in Chrome/Safari (as I only included the 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: Hope this helps! 这篇关于如何在css中旋转文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! -webkit -
CSS前缀规则)。您遇到的问题是,您不想旋转 title div ,而只是旋转其中的文本。如果你删除你的旋转,< div>
s在正确的位置,所有你需要做的是将文本包装在一个元素,旋转它。 p>
它看起来像一个高度/宽度约束,水平版本是原始计划的一部分,但我在演示页面上看不到任何配置方式。 我不正确…新手风琴是即将推出的 jQuery UI 1.9的一部分!所以你可以尝试开发版本,如果你想要的新功能。
rotate
- see here for which browsers support it and the prefix you need to use.-webkit-transform: rotate(-90deg);
-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.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.