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

我想用CSS重现以下图像:

enter image description here

对我来说特别重要的是两条线的长度相等:

enter image description here

我尝试使用此代码重新创建它(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>

但它并不完美:

enter image description here

有没有一种很好的方法如何使用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>

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...