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

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

看着小提琴,我想把“我们只是一个”放在旁边的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;
}

Fiddle

所以基本上：如何使用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%;
  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.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>

每日提示：添加白色空间：Nowrap;你甚至可以使文字超过着名的8em,并且仍然可以很好地和排版在基线上对齐,就像在这个演示中一样：https://jsfiddle.net/jf5kwh3t/8/

要使所有小文本对齐“基线”(如jsfiddle的演示最后一行),只需使用text-align：left;.