如何實現label長度固定，文字分散分佈的效果

我們經常會看到表單填寫時前面的label,都是左右對齊的，即使字數不一樣。就像下面的效果：

解析

這種效果主要通過text-align-last屬性來實現。

• text-align-last：規定如何對齊文本的最後一行

在菜鳥教程上對於這個屬性有這樣的描述：

text-align-last 屬性只有在 text-align 屬性設置爲 "justify" 時才起作用。

但我嘗試了一下，當文本只有一行的時候，text-align屬性不設置，text-align-last也是有用的。當然這只是針對非IE和Safiri而言。

text-align屬性對多行文本的最後一行文本無效。

/*css*/
.label {
      width: 200px;
      text-align-last: justify; 
}
/*html*/
<div class="label">產 品</div>

這樣的寫法，對IE瀏覽器和safari瀏覽器就不起作用了。因爲text-align-last不支持這兩個瀏覽器。

針對這個問題，我們可以用僞類來解決。

/*css*/
.label {
      width: 200px;
      height: 30px; /*高度需要添加，不然文字下面會多出一些空隙*/
      text-align: justify; 
}
 .label:after{
        content: '';
        display: inline-block;
        width: 100%;
      }
/*html*/
<div class="label">產 品</div>

有三點需要注意：

1. 因爲加了僞類之後，相當於在標籤的文本後又加了一行，所以text-align-last就不起作用了，需要加上text-align
2. 因爲加了僞類之後，文本後面會多出一行，即使給僞類設置高度爲0也不行。所以必須給.label屬性加上一個高度。區別如下：

1. 加了僞類之後，標籤的文字之間必須要存在一個空格（一個就行，不用太多），否則的話，沒有效果。

兩種方案對比

第二種方法相對於第一種方法來說，兼容性更好，我在多個瀏覽器測試了一下，都沒有問題。

第一種方案更簡潔，但是不支持ie和safari，所以建議大家還是用第二種方案更省心。