日韩国产精品99成人不卡在线无毒|狠狠躁夜夜爽一级二级精品|亚洲日日噜噜孕妇中文字幕|日韩久草中文三级片

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

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

根據(jù)justify對(duì)最后一行無效，我們可以新增一行，使該行文本不是最后一行，實(shí)現(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以上寫法可以說是比較麻煩的，重點(diǎn)來啦，最近新了解到的一個(gè)屬性text-align-last，該屬性定義的是一段文本中最后一行在被強(qiáng)制換行之前的對(duì)齊規(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;
    }}

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