在form表單的前端布局中，我們經(jīng)常需要將文本框的提示文本兩端對(duì)齊，例如：

萬(wàn)碼學(xué)堂,電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

比較粗暴的做法是在需要隔離邊距的文本中加標(biāo)簽，然后分別控制每個(gè)文字的邊距，這種方法比直接加空格或者占位符更精準(zhǔn)，我之前也都是這么做的。但是寫的多了之后開始思考能不能抽象出來(lái)用于更多的場(chǎng)景？讓代碼更好看一些？維護(hù)成本更低一些？

1、首先想到是能不能直接靠css解決問(wèn)題

css

.test-justify {
    text-align: justify;}

html

 <div class="test-justify">
        測(cè)試文本 </div>

萬(wàn)碼學(xué)堂,電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

好吧，text-align:justify完全無(wú)效，不甘心，于是用一段文本測(cè)試了下，效果如下：

萬(wàn)碼學(xué)堂,電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

原來(lái)這個(gè)屬性是針對(duì)段落文本兩端對(duì)齊的，接著試一下text-align-last: justify這個(gè)屬性

css

.test-justify {
    text-align: justify;}

萬(wàn)碼學(xué)堂,電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

效果是達(dá)到了，但缺點(diǎn)是完全不兼容ie和safari瀏覽器。

網(wǎng)友評(píng)論