将跨距放入跨度内联(Putting a span inside a span inline)

将跨距放入跨度内联(Putting a span inside a span inline)

我想显示一个大字体大的跨度和内联，我想添加分为两行的字幕（标题|一个）（标题|两个）等。

我可以通过使用字幕的手动页边距和绝对定位来实现这一点，但HTML和CSS非常快速地变得非常混乱。 也许我应该使用CSS网格？

我已经附加了我希望使用的html体结构和我将使用的.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%); }

I want to display a large span with a large font size and within that inline, I want to add subtitles that are divided into two rows (Title | One) (Title | Two) etc..

I can achieve this somewhat by using manual margining and absolute positioning of the subtitles, but the HTML and CSS gets very messy very quickly. Perhaps I should use CSS grid?

I have attached the html body structure I hope to be using and .content css that I will be using. And the image of what I hope to achieve.

<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%); }

最满意答案

您可以尝试以下解决方案：

.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> 
  
 
You can try below solution :
 
 
 
  
  
.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>