在form表單的前端布局中,我們經(jīng)常需要將文本框的提示文本兩端對齊,例如:
比較粗暴的做法是在需要隔離邊距的文本中加標簽,然后分別控制每個文字的邊距,這種方法比直接加空格或者占位符更精準,我之前也都是這么做的。但是寫的多了之后開始思考能不能抽象出來用于更多的場景?讓代碼更好看一些?維護成本更低一些?
1、首先想到是能不能直接靠css解決問題
css
.test-justify { text-align: justify;}
html
<div class="test-justify"> 測試文本 </div>
好吧,text-align:justify完全無效,不甘心,于是用一段文本測試了下,效果如下:
原來這個屬性是針對段落文本兩端對齊的,接著試一下text-align-last: justify這個屬性
css
.test-justify { text-align: justify;}
效果是達到了,但缺點是完全不兼容ie和safari瀏覽器。