Question

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

看着小提琴，我正在寻找小伙伴＆＃34;我们只是A＆＃34;紧靠S in Small和＆＃34;奋斗A＆＃34;就在＆＃39; B＆＃39;旁边。在大感觉。

现在的样子：

我想做什么

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消除旋转和非旋转文本之间的水平空间？

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://jsfiddle.net/jf5kwh3t/8/

要使所有小文字对齐 “baseline” （就像在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/

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

2 个答案: