關注前端開發
關注用戶體驗

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

相比第一種實現,第二種實現方式就簡單了不少,不過該屬性有兼容性問題,大家可以根據情況決定實現方式,想了解更多關于text-align-last的說明,參見https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align-last

贊(161)
未經允許不得轉載:大前端 » CSS之文本兩端對齊
分享到: 更多 (0)

themebetter 國內更好的WordPress主題服務商

立即前往
广东26选5复式计算