文字两端对齐实现

text-align:justify: 内容两端对齐。对多行文字的最后一行无效，而单行文字即使第一行又是最后一行，所以也是无效的。

现在来研究一下下图这个效果的实现： 文字两端对齐实现

既然text-align:justify对文字的最后一行无效，那么我们是否可以让文字的最后一行文字不是真正的最后一行呢？答案是肯定的。

  <!-- html结构 -->
   <div class="demo">
        <dl class="wrap">
            <dt class="label">姓 名</dt>
            <dd class="label-value">luffy</dd>
        </dl>
        <dl class="wrap">
            <dt class="label">电 话 号</dt>
            <dd class="label-value">1098383883</dd>
        </dl>
        <dl class="wrap">
            <dt class="label">居 住 地 址</dt>
            <dd class="label-value">桑尼号</dd>
        </dl>
    </div>
  <!--公共样式->
  <style>
    * {margin: 0;padding: 0;}
    body { font-family: '微软雅黑'}
    .wrap {margin: 10px;background: pink;overflow: hidden;}
    .label {float: left;width: 100px;height: 30px;line-height: 30px;background: tan;}
    .wrap .label-value {line-height: 30px; text-indent: 10px;}
   </style>

实现方案1:

.demo .label{
     text-align: justify;
}
.demo .label:after{
     content: '';
     display: inine-block;
     height:0;
     width: 100%;              //让伪元素称为最后一行
}

兼容性问题：

• :after：IE6/7不支持，IE8仅支持单冒号的写法。其他所有浏览器都支持
• text-align:justify: 所有的都支持

在查看text-align这个属性的时候，看到text-align-last可以用来设置最后一行(被强制打断的行的)的文字的对齐方式；兼容性看这里

实现方案2

.demo .label{
     text-align: justify;
     text-align-last: justify;
}

兼容性问题：
IE对text-align-last属性有部分实现，justify是各个版本都是支持的。firfox12以上 chrome47以上