将跨距放入跨度内联

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

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

LenVal      DataLenVal
----------- -----------
7           28

.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;

}

Answer 2

也许您正在寻找display: inline-block。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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/