將垂直旋轉的文本與水平文本對齊

Question

我正在使用某個垂直文本作爲標題元素中的一個範圍。問題是我無法弄清楚如何消除在垂直跨度和其他文本內容之間創建的空間。

看着小提琴，我正在找一個小小的S旁邊的「我們只是一個」，在Big Feel的「B」旁邊的「爭取A」。

什麼它看起來像現在：

我正在尋找做

的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>

提示-的-tha-day：通過添加white-space: nowrap;你甚至可以使文本超過着名的8em，並仍然使它成爲nic伊利和基線對齊排版在這個演示：https://jsfiddle.net/jf5kwh3t/8/

要對齊「基線」（像的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/