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

萬碼學堂,電腦培訓,計算機培訓,Java培訓,JavaEE開發(fā)培訓,青島軟件培訓,軟件工程師培訓

比較粗暴的做法是在需要隔離邊距的文本中加標簽,然后分別控制每個文字的邊距,這種方法比直接加空格或者占位符更精準,我之前也都是這么做的。但是寫的多了之后開始思考能不能抽象出來用于更多的場景?讓代碼更好看一些?維護成本更低一些?


1、首先想到是能不能直接靠css解決問題

css

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

html

 <div class="test-justify">
        測試文本 </div>

萬碼學堂,電腦培訓,計算機培訓,Java培訓,JavaEE開發(fā)培訓,青島軟件培訓,軟件工程師培訓

好吧,text-align:justify完全無效,不甘心,于是用一段文本測試了下,效果如下:

萬碼學堂,電腦培訓,計算機培訓,Java培訓,JavaEE開發(fā)培訓,青島軟件培訓,軟件工程師培訓

原來這個屬性是針對段落文本兩端對齊的,接著試一下text-align-last: justify這個屬性

css

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

萬碼學堂,電腦培訓,計算機培訓,Java培訓,JavaEE開發(fā)培訓,青島軟件培訓,軟件工程師培訓

效果是達到了,但缺點是完全不兼容ie和safari瀏覽器。

網(wǎng)友評論