說起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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/88294.html
標籤：Html/Css
上一篇：CSS實作自適應分隔線的N種方法