单行文本两端对齐

在项目中，遇到一些信息列表描述的需求时，很多时候，设计给出来的设计图大概会类似于如下格式：

这种需求应该也属于常见需求了，之前遇到的时候确实也没什么特别好的办法，基本上都是依靠给文字之间加上空格来保证同等宽度的两端对齐。

前两天，看到有人也遇到类似问题了，就想着是不是可以完全依赖css来解决，思考之中，想来在一定的变通之后，text-align: justify似乎应该能够解决这一需求。

也看了一些其他人解决这一方案的文章，最终觉得还就是text-align: justify最靠谱。

我们都知道text-align: justify设置文本对齐的话，针对的并不是单行的文本，所以这里就需要我们进行变通了。

<div class="align-justify">
    <dl>
      <dt>姓名<i></i></dt>
      <dd>:</dd>
      <dd>张三丰</dd>
    </dl>

    <dl>
      <dt>所属学校<i></i></dt>
      <dd>:</dd>
      <dd>南京第一附属学校</dd>
    </dl>
    <dl>
      <dt>归属地<i></i></dt>
      <dd>:</dd>
      <dd>南京</dd>
    </dl>
</div>

.align-justify {
  padding: 0 0.3rem;
}
.align-justify dl {
  font-size: 0.3rem;
  line-height: 2;
  color: #4a4a4a;
  height: 0.6rem;
  overflow: hidden;
}
.align-justify dl > * {
  display: inline-block;
  line-height: 2;
  vertical-align: top;
}
.align-justify dl > dt {
  width: 5em;
  text-align: justify;
  line-height: 2;
  overflow: hidden;
}
.align-justify dl > dt span {
  display: inline-block;
  vertical-align: top;
  line-height: 2;
}
.align-justify dl i {
  display: inline-block;
  width: 100%;
  height: 0;
}

　　其实，利用的也就是text-align: justify两队对齐，在文本最后加一个i标签，这个标签名无所谓哪个标签都可以，然后设置其为display:inline-block; width: 100%; 让其与文本同一行，宽度100%之后，就自然而然的自动换行了。

　　而由于多余标签i会独占一行，所以对dl需要设置高度，并进行overflow: hidden;或者对dt设置也可以。