文档两端对齐的小技巧

在日常开发工作中，我们会经常会遇到一些看起来不起眼的小需求，比如如下图所示

两端对齐.png

我需要姓名两个字和联系方式对齐，给人感觉很简单，不就是加几个空格吗，其实不然，我们先加几个空格试验一下。请看以下代码 ：

<style>
    div {
       border: 1px solid green;
      font-size: 20px;
    }
    span {
      border: 1px solid green;
      display:inline-block;
      width: 4em;
    }
  </style>
 <div>
    <span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span> <br>
    <span>联系方式</span>
 </div>

可以看到我在姓名中间加了很多字符 &nbsp；它是HTML中表示空格的元素，虽然这种看起来代码不是特别的优雅，基本也能实现：效果图如下;

两端对齐

我在想能不能用几行代码写一下，既能达到上面的效果，看起来代码也并不是很臃肿，我想到了一个css属性 text-anlign 定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。
它有几个属性 刚好有一个 text-anlign：justify 文字向两侧对齐，对最后一行无效。
我们能不能利用一下这个属性呢，text-anlign：justify只有在换行的时候有效，怎么才能增加一行呢 ，这个时候就用到了::after这个伪元素（妙用无穷啊）
代码如下

<style>
    div {
       border: 1px solid green;
      font-size: 20px;
    }
    span {
      border: 1px solid green;
      display:inline-block;
      width: 4em;
      text-align: justify;/*两端对齐*/
      overflow: hidden;/*把多余的after元素隐藏起来*/
      line-height:20px;/*行高*/
      height:20px;/*高度限制死 把多余的伪元素挤下去 方便隐藏*/
    }
    span::after{
      content:'';
      display: inline-block;
      width:100%;
    }
  </style>
 <div>
    <span>姓名</span> <br>
    <span>联系方式</span>
 </div>

效果如下

两端对齐
这种方法用到了很多 小技巧 ，思路是这样的 ： 先用 text-align: justify;两端对齐，再用::after插入一行空文本，达到基本效果后，设置span的高度height，将高度限制死之后，将空元素挤下去，最后用到overflow: hidden;把多余的空元素隐藏起来，就大功告成了。
寄语 与君共勉 ：
前端路上充满未知 我们只需砥砺前行