在H2内旋转元素

Question

我试图在<span> 90度内旋转<h2>。

现在，如果我将其设置为旋转没有任何反应 - 但如果我向display:block添加span，则它会旋转。我的问题是它将h2的其余部分推到了下一行。

有没有办法让h2显示在一行，span在其中间旋转？

这是它的外观

HTML：

<h2>Join <span class="flip-text">With</span><span class="flip-text">Your</span> Family</h2>

CSS：

span.flip-text{font-size:10px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

Answer 1

就像克里斯托弗建议的那样，显示：inline-block是要走的路： http://jsfiddle.net/X85b6/

<h2>Join<span>with<br />your</span>Family</h2>

h2 {
    font-size: 60px;
    text-transform: uppercase;
}
h2 span {
    font-size: 15px;
    line-height: 16px;
    display: inline-block;
    position: relative;
    bottom: 5px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}