css實現(xiàn)文本兩端對齊的方法

css實現(xiàn)文本兩端對齊的方法

說起text-align，大家一定都不覺得陌生，我們常用關(guān)鍵字left、right、center實現(xiàn)行內(nèi)元素相對父元素左、右、居中對齊，當(dāng)然我們也使用justify來實現(xiàn)文本兩端對齊。

如上圖，兩端對齊相對于左對齊，視覺上顯得整齊有序。但justify對最后一行無效，通常這樣的排版對整段文字是極好的，我們并不希望當(dāng)最后一行只有兩個字時也兩端對齊，畢竟這是不便于閱讀的，那么當(dāng)我們只有一行文本，但要實現(xiàn)單行文本兩端對齊怎么解決（如下圖的表單項效果）？

根據(jù)justify對最后一行無效，我們可以新增一行，使該行文本不是最后一行，實現(xiàn)如下：

//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，該屬性定義的是一段文本中最后一行在被強制換行之前的對齊規(guī)則。

//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;
 }
}

相比第一種實現(xiàn)，第二種實現(xiàn)方式就簡單了不少，不過該屬性有兼容性問題，大家可以根據(jù)情況決定實現(xiàn)方式。

( 推薦學(xué)習(xí)：CSS教程 )

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com