html - 将跨度放入跨度内联

Question

我想以大字体显示大跨度，并在该内联中添加分为两行的字幕(标题 | 一)(标题 | 二)等。

我可以通过使用字幕的手动边距和绝对定位来实现这一点，但 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%);
}

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>