不同瀏覽器下相容文字兩端對齊

在 form 表單的前端布局中，我們經常需要將文字框的提示文字兩端對齊，例如：

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

.test-justify

測試文字

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

css

.test-justify

2、接著思考，既然上述實現存在相容性問題，那麼能不能為 2 個，3 個，4 個等這樣長度的文字單獨寫 css 類解決，因為表單的文字框提示文字也不會很多。

css

div 

.w2 
.w3 

測試

測試了測試來了
此方案參考自blog.csdn.net/muyutingfeng2008/article/details/48263073
這種方案看起來能夠解決問題，應對大部分場景應該沒問題了，但遺憾的是並不是真正的兩端對齊，特殊顯示的情況下還是無法滿足需求，我們先放著，繼續往下嘗試。
2、以上是純 css 實現方式，接下來我們看看 css 和 dom 結合能不能做出統一形式的解決方案。
html
測 試 文 本

css

.test-justify 

span 
想想還有一些小激動呢，而且完美相容 ie 和 safari，這種方案其實就是第一種段落對齊方案的擴充套件，用空格強制分詞，然後用 span 偽造最後一行（test-justify 不會對最後一行進行對齊）。

為了增加擴充套件性，我們還得對這種方案進行優化，因為大多數情況下文字是後端載入的。
例如 .net core razor 檢視載入 model displayname 的寫法

只要加一小段js然後就應該能相容所有場景了。

css
div 

.test-justify 
span 
html

測試文字

js

var $this = $(".test-justify")

, justifytext = $this.text().trim()
, aftertext = "";
for (var i = 0; i < justifytext.length; i++) 
aftertext = aftertext.trim() + "";
$this.html(aftertext).css();
好了，這種方案應該能支援主流的瀏覽器了，但缺點是由於通過js再調整的，所以重新整理的時候仔細看會看到文字兩端對齊的過程（閃一下），體驗並不是很好，那就做一下相容吧。

只有 ie 和 safari 不支援text-align-last: justify所以只考慮這兩種瀏覽器的情況下呼叫最後一種方案
function mybrowser()  else if (isie)  else if (isedge)  else if (isie11)  else if (/[cc]hrome\/\d+/.test(useragent))  else if (/[vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[ss]afari/.test(useragent))  else 

}var browser = mybrowser();
if (browser == "ie" || browser == "safari") 
aftertext = aftertext.trim() + "";
$this.html(aftertext).css()
}
哈哈哈，完美！

補充：因為空格增加了字間距，為了達到最佳呈現效果可以隨意增加乙個極限的單詞邊距word-spacing: -10px
 
文字兩端對齊
學習貼 最近在工作專案中接觸到web介面設計的問題，要實現文字兩端對齊的效果。在網上搜尋了一下，用的都是類似的技巧 text align justify text justify inter ideograph 我遇到問題是 看不到效果，無論是英文還是中文，在ie和chrome下都不起作用。還好在s...
css text align文字兩端對齊
text align start end left right center justify match parent justify all justify 內容兩端對齊，但對於強制打斷的行 被打斷的這一行 及最後一行 包括僅有一行文字的情況，因為它既是第一行也是最後一行 不做處理。start 內...
文字兩端對齊text align justify
使用text align justify可以實行文字兩端對齊，但他在大段文字中使用效果較好。因為該屬性會自動忽略最後一行。由下面兩圖可以看出，加了justify屬性，文字會兩端對齊，除了最後一行，這也符合一般規範。未加text align justify 加了text align justify 但...