拉伸两条线到相同的长度？

Question

我想用CSS复制以下图像：

对我来说特别重要的是，这两行的长度相等：

我尝试使用以下代码（jFiddle）重新创建它：

.box {
  font-family: "Open Sans";
  line-height: 28px;
  font-weight: 700;
  background-color: #2c343c;
  margin: 20px;
  padding: 20px;
  width: 150px;
  text-align: justify;
}

.box .name {
  color: #fff;
  font-size: 24px;
}

.box .sub {
  color: #f29400;
  font-size: 15px;
  letter-spacing: 1px;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
  <span class="name">Dr. Nielsen</span><br>
  <span class="sub">WEBDEVELOPER
	</div>

但它并不十分完美：

有没有一种很好的方法来使用CSS实现此目的，以便两行在任何设备上都具有相同的长度。还是建议为此使用图片？

Answer 1

您可以尝试text-align-last:justify;

此外，为避免设置宽度，您可以通过display:table;将框变成缩小其内容的块。您还可以避免将<br>设置扩展到各个块

.box {
  font-family: "Open Sans";
  line-height: 28px;
  font-weight: 700;
  background-color: #2c343c;
  margin: 20px;
  padding: 20px;
  display: table;
  text-align: justify;
}

span {
  display: block;
  text-align-last: justify;
}

.box .name {
  color: #fff;
  font-size: 24px;
}

.box .sub {
  color: #f29400;
  font-size: 15px;
  letter-spacing: 1px;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
  <span class="name">Dr. Nielsen</span>
  <span class="sub">WEBDEVELOPER</span>
</div>
<div class="box">
  <span class="name">Dr. Nielsen</span>
  <span class="sub">WEB-DEVELOPPER</span>
</div>

<div class="box">
  <span class="name">Watch Out when top too long</span>
  <span class="sub">single-short-breaks!</span>
</div>

Answer 2

您应该删除容器（text-align: justify;）上的.box，并给.name一些额外的字母间距，以便使两行对齐。

  

请注意，这将完全取决于字体设置。另一个字体系列，大小等会更改两行的大小并使它再次不同。如果访问您网站的用户更改了浏览器的字体大小，那么他们将看不到您所看到的确切信息。如果要避免这种情况（尽可能），请查看字体大小重置。

.box {
  font-family: "Open Sans";
  line-height: 28px;
  font-weight: 700;
  background-color: #2c343c;
  margin: 20px;
  padding: 20px;
  width: 150px;
}

.box .name {
  color: #fff;
  font-size: 24px;
  letter-spacing: .3px;
  /* added */
}

.box .sub {
  color: #f29400;
  font-size: 15px;
  letter-spacing: 1px;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
  <span class="name">Dr. Nielsen</span>
  <span class="sub">WEBDEVELOPER</span>
</div>