css - 将两条线拉成相同的长度？

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; 将盒子变成一个在其内容上缩小的 block 。 .您也可以避免 <br>设置跨度为 block

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