縦書きのテキストを横書きのテキストに整列する

Question

見出し要素内のスパンとして、いくつかの縦書きのテキストを再生しています。問題は、垂直スパンとテキストコンテンツの残りの部分の間に作られたスペースを排除する方法を見つけることができないことです。

フィドルを見て、私は小さなものでSの隣に「We're Just A」、ビッグフィールでは「B」の隣にある「Striving For 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を超えても、それでもニックにすることさえできますエリーと活字このデモのように、ベースラインで揃え：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/