Html 将跨距放在跨距内联中

我想用大字体显示一个大跨距，在这个内联中，我想添加分为两行的字幕（Title | One）（Title | two）等等

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

我已经附加了我希望使用的html主体结构和我将使用的

.content

css。以及我希望实现的形象

姓氏Las
标题1
标题
.内容{
位置：绝对位置；
最高：50%；
左：50%；
保证金：0自动；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}

也许您正在寻找

显示：内联块

.inline{
显示：内联块；
字体大小：30px；
最大宽度：100px；
}

名字
Las
标题一
标题二

也许您正在寻找

显示：内联块

.inline{
显示：内联块；
字体大小：30px；
最大宽度：100px；
}

名字
Las
标题一
标题二

试试这个：

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>

姓氏Las
标题1
标题

演示：

试试这个：

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>

姓氏Las
标题1
标题

---

演示：

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

.content{
位置：绝对位置；
最高：50%；
左：50%；
保证金：0自动；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.fname{
显示：块
}
.标题{
字体大小：11px；
宽度：20px！重要；
空白：正常；
显示：内联块；
}

名字
拉斯维加斯
标题一
标题

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

.content{
位置：绝对位置；
最高：50%；
左：50%；
保证金：0自动；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.fname{
显示：块
}
.标题{
字体大小：11px；
宽度：20px！重要；
空白：正常；
显示：内联块；
}

名字
拉斯维加斯
标题一
标题

你想要的就是这个形象吗？@PraveenKumar yesso。。。为什么你没有尝试css网格？@A.Lau，因为它太过复杂，在这里没有必要？@torazaburo好吧，公认的答案是有点粗糙，依赖于固定长度，这意味着它不太可能被转移到未来的用途。网格或flexbox整体上会提供更好的功能。图像是您想要实现的吗？@PraveenKumar yesso。。。为什么你没有尝试css网格？@A.Lau，因为它太过复杂，在这里没有必要？@torazaburo好吧，公认的答案是有点粗糙，依赖于固定长度，这意味着它不太可能被转移到未来的用途。网格或flexbox整体上会提供更好的功能。有没有可能它们不是在同一行上的标题，而是在不同的行上<代码>标题标题标题一二是否可能不是标题一在同一行上，而是在不同的行上<代码>标题一二