text-align:justify: 內(nèi)容兩端對(duì)齊。對(duì)多行文字的最后一行無(wú)效，而單行文字即使第一行又是最后一行，所以也是無(wú)效的。

文字兩端對(duì)齊實(shí)現(xiàn)

既然text-align:justify對(duì)文字的最后一行無(wú)效，那么我們是否可以讓文字的最后一行文字不是真正的最后一行呢？答案是肯定的。

  <!-- html結(jié)構(gòu) -->
   <div class="demo">
        <dl class="wrap">
            <dt class="label">姓 名</dt>
            <dd class="label-value">luffy</dd>
        </dl>
        <dl class="wrap">
            <dt class="label">電 話 號(hào)</dt>
            <dd class="label-value">1098383883</dd>
        </dl>
        <dl class="wrap">
            <dt class="label">居 住 地 址</dt>
            <dd class="label-value">桑尼號(hào)</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>

實(shí)現(xiàn)方案1:

.demo .label{
     text-align: justify;
}
.demo .label:after{
     content: '';
     display: inine-block;
     height:0;
     width: 100%;              //讓偽元素稱(chēng)為最后一行
}

兼容性問(wèn)題：

• :after：IE6/7不支持，IE8僅支持單冒號(hào)的寫(xiě)法。其他所有瀏覽器都支持
• text-align:justify: 所有的都支持

在查看text-align這個(gè)屬性的時(shí)候，看到text-align-last可以用來(lái)設(shè)置最后一行(被強(qiáng)制打斷的行的)的文字的對(duì)齊方式；兼容性看這里

實(shí)現(xiàn)方案2

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

兼容性問(wèn)題：
IE對(duì)text-align-last屬性有部分實(shí)現(xiàn)，justify是各個(gè)版本都是支持的。firfox12以上 chrome47以上