如何解決text-align: justify;瀏覽器、安卓手機不兼容問題

今天須要切一個響應式網頁，有一行文字，須要實現兩端對齊。

代碼以下：

.h_text{
    text-align: justify;
    width: 200px;
} 
<h1 class="h_text">這一行要兩端對齊</h1>

根據經驗找到text-align:justify;首先用PC端瀏覽器測試，刷新網頁沒起做用。

在網上搜尋，發現「只有一行文字或者最後一行文字，是沒效果的，默認靠左對齊」。

解決辦法有如下幾個：

一、使用「text-align-last：justify;」意思是告訴電腦，「這是最後一行代碼，也給我兩端對齊了」

.h_text{
    text-align-last: justify; 
    width: 200px;
}
<h1 class="h_text">這一行要兩端對齊</h1>

但text-align-last並非全部瀏覽器都兼容。

二、在文字後邊加一行，而後給隱藏了

.h_text{
    text-align: justify; 
    width: 200px;
}
.span_hid{
    display: inline-block;
    width: 100%;
    opacity: 0;
}
 
<h1 class="h_text">
    這一行要兩端對齊
    <span class="span_hid">隱藏的一段代碼</span>
</h1>

隱藏後文本仍是會佔位置，影響佈局效果很差，並且這麼low的行爲，不符合一個工程師的身份。

三、在文字後邊加一個空標籤

.h_text{
    text-align: justify; 
    width: 200px;
}
.span_hid{
    display: inline-block; 
    width: 100%;
}
 
<h1 class="h_text">
    這一行要兩端對齊
    <span class="p_hid"></span>
</h1>

嗯，這樣就好多了，可是對IE瀏覽器仍是有些問題。

四、這時須要添加「text-justify:inter-ideograph;」大意就是，增長或減小詞間的空格

.h_text{
    text-align: justify; 
    text-justify: inter-ideograph;
    width: 200px;
} 
.span_hid{ 
    display: inline-block; 
    width: 100%;
}
 
<h1 class="h_text">
    這一行要兩端對齊
    <span class="span_hid"></span>
</h1>

完美解決了對IE瀏覽器的兼容。

若是隻兼容PC端瀏覽器，就已經解決了。

But，還要兼容手機瀏覽器。

QQ、微信軟件內打開網頁，沒問題。下載安裝的瀏覽器：QQ、UC等也沒有問題。iPhone手機自帶瀏覽器也沒有問題。
可是用安卓手機再帶的瀏覽器，問題就出現了。完美的向左靠齊，怎麼搞就是沒效果。

因而又從新走了一遍1-4的流程。結果並沒什麼用。

通過查詢找到一個問題。text-align-last，safari 不支持的解決辦法

文章中提到：IE瀏覽器中須要文字間添加空格。那麼安卓瀏覽器會不會也這樣。

五、因而給每一個文字之間添加了一個空格，成功解決了各瀏覽器不兼容、手機端不兼容的問題。

.h_text{ 
    text-align: justify;
    text-justify: inter-ideograph;
    width: 200px;
} 
.span_hid{ 
    display: inline-block;
    width: 100%;
}
 
<h1 class="h_text">
    這 一 行 要 兩 端 對 齊
    <span class="span_hid"></span>
</h1>

固然文字少是沒啥問題，可是文字比較多的話，須要一些JS代碼給文字之間加空格。

var text= "這一行要兩端對齊";
var result = text.split("").join(" ");

至於添加after僞類，更加簡潔一些。沒有應用。

項目實例：中國銀河證券APP，以供參考。