97精品超碰一区二区三区91|亚洲视频一二最新在线无码|精品国人人妻九九九九Av竹菊|久久成人综合激情|亚洲 欧美 制服 中文 综合|全国免费无码不卡|久久伊人午夜影院|亚州在线一区|人妻久反中文字幕|色欲影视欧美色图

新聞動態(tài)

CSS之文本兩端對齊

行業(yè)資訊 發(fā)布者:zyh123 2019-05-17 14:48 訪問量:278

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

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

根據(jù)justify對最后一行無效,我們可以新增一行,使該行文本不是最后一行,實(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)來啦,最近新了解到的一個屬性text-align-last,該屬性定義的是一段文本中最后一行在被強(qiáng)制換行之前的對齊規(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)方式就簡單了不少,不過該屬性有兼容性問題,大家可以根據(jù)情況決定實(shí)現(xiàn)方式,想了解更多關(guān)于text-align-last的說明,參見https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align-last



關(guān)鍵字:

文章連接: http://www.weemall.cn/hyzx/227.html

版權(quán)聲明:文章由 晨展科技 整理收集,來源于互聯(lián)網(wǎng)或者用戶投稿,如有侵權(quán),請聯(lián)系我們,我們會立即刪除。如轉(zhuǎn)載請保留