スパンをインラインにインラインで埋め込む

Question

大きなフォントサイズの大きなスパンを表示したいので、インラインで2行（Title | One）（Title | Two）に分割された字幕を追加したい

私は手動マージンと字幕の絶対的な配置を使用することでこれをいくらか達成できますが、HTMLとCSSは非常に面倒です。おそらく私はCSSのグリッドを使用する必要がありますか？

私は使用することを望んでおり、.content cssを使用することを望みます。そして私が達成したいと思うもののイメージ。

<div class="content"> 
    <h1> 
    <span class="name">Firstname Las</span> 
    <span class="title">Title 1</span> 
    <span class="title">Title</span>    
    </h1> 
</div> 

.content { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: 0 auto; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

Answer 1

あなたは、ソリューションの下に試すことができます。

.content { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin: 0 auto; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 
.fname{ 
 
    display:block 
 
} 
 
.title{  
 
    font-size: 11px; 
 
    width: 20px !important; 
 
    white-space: normal; 
 
    display: inline-block; 
 

 
}

<div class="content"> 
 
    <h1> 
 
    <span class="fname">Firstname</span> 
 
    <span class="lname">Las</span> 
 
    <span class="title">Title one</span> 
 
    <span class="title">Title</span>    
 
    </h1> 
 
</div>

Answer 2

おそらく、あなたはdisplay: inline-blockを探しています。

.inline { 
 
    display: inline-block; 
 
    font-size: 30px; 
 
    max-width: 100px; 
 
}

<span style="font-size: 72px; text-transform: uppercase; "> 
 
    First Name<br/>Las 
 
    <span class="inline">Title One</span> 
 
    <span class="inline">Title Two</span> 
 
    <span> 
 
</span>

Answer 3

これを試してみてください：

CSS

h1 { 
    font-size: 50px; 
    font-weight: bold; 
    width: 300px; 
    word-break: break-word; 
    } 

    span.title { 
    font-size: 20px; 
    width: 42px; 
    overflow: hidden; 
    display: inline-block; 
    vertical-align: top; 
    } 

HTML

<div class="content"> 
    <h1> 
    <span class="name">Firstname Las</span> 
    <span class="title">Title 1</span> 
    <span class="title">Title</span>    
    </h1> 
</div> 

デモ：http://jsfiddle.net/lotusgodkk/GCu2D/2133/