Question

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

enter image description here 喜

编辑：

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

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

我面临的问题是，当我们旋转文本时，它会打破对齐和位置......所以导致这种情况的原因以及如何管理它们？

Answer 1

您需要使用支持它的CSS3 transform property rotate - see here以及您需要使用的前缀。

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

修改：问题发生了重大变化，因此我添加了一个适用于Chrome / Safari的demo（因为我只包含了-webkit- CSS前缀规则）。您遇到的问题是您不想旋转标题div ，而只是旋转其中的文本。如果您移除了旋转，<div>处于正确的位置，您需要做的就是将文本包装在一个元素中并转而旋转。

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

编辑2 ：我已经预料到了文本中心问题，并且已经updated my demo了。但是有一个高度/宽度约束，因此较长的文本仍然可以破坏布局。

编辑3： ~~看起来水平版本是original plan的一部分，但我看不到在演示页面上配置它的任何方法。~~ I是不正确的...新手风琴是即将推出的 jQuery UI 1.9的一部分！因此，如果您需要新功能，可以尝试开发构建。

希望这有帮助！

Answer 2

我猜this正是您要找的？

添加了一个示例：

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的例子来自上述网站。

Answer 3

在您的情况下，如前所述，最好使用transform属性中的rotate选项。还有writing-mode属性，它的工作方式就像旋转（90度），所以在你的情况下，它应该在应用后旋转。即使在这种情况下它不是正确的解决方案，但你应该知道这个属性。

示例：

writing-mode:vertical-rl;

有关变换的更多信息：https://kolosek.com/css-transform/

有关写作模式的更多信息：https://css-tricks.com/almanac/properties/w/writing-mode/

Answer 4

你可以这样使用......

<div id="rot">hello</div>

#rot
{
   -webkit-transform: rotate(-90deg); 
   -moz-transform: rotate(-90deg);    
    width:100px;
}

看看这个小提琴：http://jsfiddle.net/anish/MAN4g/

Answer 5

使用writing-mode和transform。

.rotate {
     writing-mode: vertical-lr;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
}


<span class="rotate">Hello</span>

Answer 6

你也可以

<div style="position:relative;display:block; height:125px;width:300px;">
    <div class="status">
        <div class="inner-point">
            <div class="inner nowrap">
                Some text
            </div>
        </div>
    </div>
</div>

<style>
.status {
    position: absolute;
    background: #009FE3;
    right: 0;
    bottom: 0;
    top: 0;
    width: 37px;
}

.status .inner-point {
    position: absolute;
    bottom: 0;
    left: 0;
    background: red;
    width: 37px;
    height: 37px;
}

.status .inner {
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 27px;
    letter-spacing: 0.2px;
    color: white;
    transform: rotate(-90deg);
}
</style>

我如何在CSS中旋转文本

6 个答案: