將跨度放在跨度內嵌

Question

我想要顯示一個大跨度的大字體，並且在內聯中，我想添加分成兩行（Title | One）（Title | Two）等的字幕。

我可以通過使用手動頁邊距和字幕的絕對定位來實現這一點，但HTML和CSS非常快速地變得非常混亂。也許我應該使用CSS網格？

我已經附加了我希望使用的html body結構和我將要使用的.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/