Css 在H2内旋转元件

我试图将

旋转90度

现在，如果我只是将其设置为旋转，则不会发生任何事情-但是如果我在

span

中添加

display:block

，则它会旋转。我的问题是它将

h2的其余部分推到下一行

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

下面是它的外观

HTML:

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

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);}

正如Christopher所建议的，display:inline块是一种方法：

Joinwith
您的家人
氢{
字体大小：60px；
文本转换：大写；
}
氢跨度{
字体大小：15px；
线高：16px；
显示：内联块；
位置：相对位置；
底部：5px；
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-ms变换：旋转（-90度）；
-o变换：旋转（-90度）；
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=3）；
-ms过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=3）；
}
正如Christopher所建议的，显示：内联块是一种方法：

Joinwith
您的家人
氢{
字体大小：60px；
文本转换：大写；
}
氢跨度{
字体大小：15px；
线高：16px；
显示：内联块；
位置：相对位置；
底部：5px；
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-ms变换：旋转（-90度）；
-o变换：旋转（-90度）；
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=3）；
-ms过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=3）；
}
你可以尝试显示：内联块，因为块而将“家族”推到下一行。你可以在一个跨距中同时使用“&”你的“家族”并尝试这样做吗？这只是在一个角度上将“家族”与“你的”排成一行。你可以尝试显示：内联块，因为块而将“家族”推到下一行。你可以同时使用“&”你的“家族”进行包装吗在一个跨距内，试着这样做？那只是在一个角度上与你的一行对齐。我的问题是，保持
h2
（
article
）宽度的元素是282px，因此它左右两侧的“填充”将下一个单词推到下一行。这是我得到的-这不理想，因为它将强制内容超出包装器，但您可以添加空白：nowrap；到最后。我的建议是看看为什么这篇文章是一个固定的维度，并可能提供替代样式，当它太小而无法处理全尺寸设计时。根据您的链接，看起来您需要将的左/右填充设置为0，并调整旋转跨距的线宽。nowrap方法会太麻烦-文章具有设置宽度的原因是页面上有3个对齐。我的问题是，包含
h2
（
article
）的元素宽度为282px，因此它左右两侧的“填充”将下一个单词推到下一行这是我得到的-这并不理想，因为它将强制内容超出包装器，但您可以添加空白：nowrap；到最后。我的建议是看看为什么这篇文章是一个固定的维度，并可能提供替代样式，当它太小而无法处理全尺寸设计时。根据您的链接，看起来您需要将的左/右填充设置为0，并调整旋转跨距的线条高度。nowrap方法会太麻烦-文章设置宽度的原因是页面上有3个对齐。
<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);
}