我如何在CSS中旋转文本
Koo*_*bin 45 css css3 text-rotation
如何在css中旋转文本以获得以下输出...
喜
编辑:
感谢您的快速建议.我在jsfidle中添加了我的示例代码:
http://jsfiddle.net/koolkabin/yawYM/
我面临的问题是,当我们旋转文本时,它会打破对齐和位置......所以导致这种情况的原因以及如何管理它们？
and*_*dyb 44
您需要使用CSS3 转换属性 rotate - 请参阅此处了解哪些浏览器支持它以及您需要使用的前缀.
webkit浏览器的一个例子是 -webkit-transform: rotate(-90deg);
编辑:问题发生了重大变化,因此我添加了一个适用于Chrome/Safari 的演示(因为我只包含-webkit-CSS前缀规则).您遇到的问题是您不想旋转标题div,而只是旋转其中的文本.如果移除旋转,则<div>s位于正确的位置,您需要做的就是将文本包装在元素中并旋转它.
作为jQuery UI的一部分,已经存在一个更可自定义的小部件 - 请参阅手风琴演示页面.我肯定有一些CSS聪明,你应该能够使手风琴垂直,并旋转标题文本:-)
编辑2:我已经预料到文本中心问题,并且已经更新了我的演示.但是有一个高度/宽度约束,因此较长的文本仍然可以破坏布局.
编辑3: 看起来水平版本是原始计划的一部分,但我看不到在演示页面上配置它的任何方式.我错了......新的手风琴是即将推出的 jQuery UI 1.9的一部分!因此,如果您想要新功能,可以尝试开发构建.
希望这可以帮助!
Rob*_*Rob 18
我想这就是你要找的东西？
添加了一个示例:
html:
<div class="example-date">
<span class="day">31</span>
<span class="month">July</span>
<span class="year">2009</span>
</div>
css:
.year
{
display:block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support
}
Alle的例子来自上述网站.
Nes*_*ric 14
在您的情况下,如前所述,最好使用transform属性中的rotate选项.还有writing-mode属性,它的工作方式就像旋转(90度),所以在你的情况下,它应该在应用后旋转.即使在这种情况下它不是正确的解决方案,但你应该知道这个属性.
例:
writing-mode:vertical-rl;
有关转换的更多信息:https://kolosek.com/css-transform/
有关写作模式的更多信息:https://css-tricks.com/almanac/properties/w/writing-mode/
- 这很好用。并且，如果您希望文本面向“右”（字母顶部朝左），请使用“writing-mode:vertical-lr;transform:rotate(-180deg);” 它获取间距和方向。 (4认同)
- **到目前为止，这是更好的答案，因为它可以旋转文本而没有副作用**，例如，为文本添加背景，并查看变换整个元素也如何旋转文本。 (3认同)
小智 14
使用writing-mode和transform.
.rotate {
writing-mode: vertical-lr;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
<span class="rotate">Hello</span>
你可以这样使用...
<div id="rot">hello</div>
#rot
{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
width:100px;
}
看看这个小提琴：http : //jsfiddle.net/anish/MAN4g/