将垂直旋转文本与水平文本对齐

Question

我正在使用一些垂直文本作为标题元素中的跨度。 问题是我无法弄清楚如何消除在垂直跨度和其他文本内容之间创建的空间。

看着小提琴，我想把“我们只是一个”放在旁边的S in Small和“奋斗A”旁边的'B'中。

它现在看起来像什么：

我想做什么

HTML：

<h2>
 <span class="smallVertical orangeText">We're Just A</span>
 Small<br/>Company<br/>
 <span class="smallVertical">Striving For A</span>
 <span class="orangeText">Big Feel</span>
</h2>

CSS：

@import 'https://fonts.googleapis.com/css?family=Oswald';

h2 {
  text-align:right;
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  font-size:8em;
  line-height:1.1em;
}

h2 span.smallVertical {
  font-size:12%;
  transform: rotate(-90deg);
  letter-spacing:0.1em;
  float:left;
}

h2 span.orangeText {
  color:#FF9900;
}

小提琴

所以基本上：如何使用CSS消除旋转和非旋转文本之间的水平空间？

Answer 1

这很难 ，看起来你需要一些真正的帮助:)
我将尝试用代码解释：

 @import 'https://fonts.googleapis.com/css?family=Oswald'; h2 { text-align: right; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 8em; line-height: 1.1em; } h2 span.smallVertical { font-size: 12%; letter-spacing: 0.1em; /*float: left; /* NOOOOOOOOOOOO :) */ display: inline-block; /* use this instead of float:left */ transform: rotate(-90deg) translateY(50%); /* Add: translateY 50% */ width: 8em; /* same as font size (OR A BIT SMALLER) */ text-align:center; /* to center text inside the red thing */ vertical-align:top; /* top to "center" span... (yeah I know...) */ background:rgba(255,0,0,0.1); /* just to see what the heck we're doing */ white-space: nowrap; /* prevent small text wrap at 8em */ } h2 span.orangeText { color: #FF9900; } 

 <h2> <span class="smallVertical orangeText">We're Just A</span> Small<br/>Company<br/> <span class="smallVertical">Striving For A</span> <span class="orangeText">Big Feel</span> </h2> 

每日提示 ：添加white-space: nowrap; 你甚至可以使文本超过着名的8em并且仍然可以很好地和排版在基线上对齐，如本演示： https ： 8em

要使所有小文本对齐“基线” （如jsFiddle的演示最后一行），只需使用
text-align: left; 。

Answer 2

这符合您的要求，但也保持文本的顺序。

通过将单词包装在div标签中，我们可以使用绝对定位将跨度定位在它们的左侧。

HTML：

<h2>
<div class="top">
    <span class="smallVertical orangeText">We're Just A</span>
    Small
</div>
<div class="mid">
  Company
</div>
<div class="bottom">
    <span class="smallVertical">Striving For A</span>
    <span class="orangeText">Big Feel</span>
</div>

CSS：

@import 'https://fonts.googleapis.com/css?family=Oswald';
h2 {
    position: relative;
    text-align: right;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 8em;
    line-height: 1.1em;
}

h2 div {
    position: absolute;
    right: 0;
}

.top {
    top: 0;
}

.mid {
    top: 135px;
}

.bottom {
    top: 270px;
}

h2 span.smallVertical {
    font-size: 12%;
    transform: rotate(-90deg);
    letter-spacing: 0.1em;
    position: absolute;
    top: 0;
    left: -66px;
}

.bottom .smallVertical {
    left: -76px
}

h2 span.orangeText {
    color: #FF9900;
}

https://jsfiddle.net/jf5kwh3t/7/