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

李佳臣發表於2018-02-05
瀏覽器安卓

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

程式碼如下：

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

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

在網上搜尋，發現“只有一行文字或者最後一行文字，是沒效果的，預設靠左對齊”。

解決辦法有以下幾個：

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

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

但text-align-last並不是所有瀏覽器都相容。

2、在文字後邊加一行，然後給隱藏了

.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的行為，不符合一個工程師的身份。

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

.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瀏覽器還是有些問題。

4、這時需要新增“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瀏覽器中需要文字間新增空格。那麼安卓瀏覽器會不會也這樣。

5、於是給每個文字之間新增了一個空格，成功解決了各瀏覽器不相容、手機端不相容的問題。

.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，以供參考。

相關文章