CSS之文字兩端對齊
摘要：
說起text-align，大家一定都不覺得陌生，我們常用關鍵字left、right、center實現行內元素相對父元素左、右、居中對齊，當然我們也使用justify來實現文字兩端對齊。
如上圖，兩端對齊相對於左對齊，視覺上顯得整齊有序。但justify對最後一行無效，通常這樣的排...
說起text-align，大家一定都不覺得陌生，我們常用關鍵字left、right、center實現行內元素相對父元素左、右、居中對齊，當然我們也使用justify來實現文字兩端對齊。
如上圖，兩端對齊相對於左對齊，視覺上顯得整齊有序。但justify對最後一行無效，通常這樣的排版對整段文字是極好的，我們並不希望當最後一行只有兩個字時也兩端對齊，畢竟這是不便於閱讀的，那麼當我們只有一行文字，但要實現單行文字兩端對齊怎麼解決（如下圖的表單項效果）？
根據justify對最後一行無效，我們可以新增一行，使該行文字不是最後一行，實現如下：
//html
<div class="item">
<span class="label" >{{item.label}}</span>：
<span class="value">{{item.value}}</span>
</div>
//scss
.item {
height: 32px;
line-height: 32px;
margin-bottom: 8px;
.label {
display: inline-block;
height: 100%;
width: 100px;
text-align: justify;
vertical-align: top;
&::after {
display: inline-block;
width: 100%;
content: '';
height: 0;
}
}
.value {
padding-right: 10px;
}
}
but以上寫法可以說是比較麻煩的，重點來啦，最近新瞭解到的一個屬性 text-align-last ，該屬性定義的是一段文字中最後一行在被強制換行之前的對齊規則。
//scss
.item {
margin-bottom: 8px;
.label {
display: inline-block;
height: 100%;
min-width: 100px;
text-align: justify;
text-align-last: justify;
}
.value {
padding-right: 10px;
}
}
相比第一種實現，第二種實現方式就簡單了不少，不過該屬性有相容性問題，大家可以根據情況決定實現方式，想了解更多關於text-align-last的說明，參見 CSS/text-align-last" rel="nofollow,noindex" target="_blank">https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align-last