如何實現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，因此建議你們仍是用第二種方案更省心。