css – 拉伸两条相同长度的线？

我想用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实现这一点,以便两条线在任何设备上获得相同的长度.或者是否建议为此使用图片？

你可以试试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>