css實作文字兩端對齊的方法

本篇文章介紹了使用css實現文字兩端對齊的效果，具有一定的參考價值，有興趣的朋友可以看看。

css實作文字兩端對齊的方法

說起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;
    }
}

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

( 推薦學習：CSS教學 )

以上是css實作文字兩端對齊的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！