資訊專欄INFORMATION COLUMN
摘要：下載安裝的瀏覽器等也沒有問題。但是用安卓手機再帶的瀏覽器，問題就出現了。經過查詢找到一個問題。于是給每個文字之間添加了一個空格，成功解決了各瀏覽器不兼容手機端不兼容的問題。
今天需要切一個響應式網頁，有一行文字，需要實現兩端對齊。
代碼如下：
.h_text{
text-align: justify;
width: 200px;
}
這一行要兩端對齊
根據經驗找到text-align:justify;首先用PC端瀏覽器測試，刷新網頁沒起作用。
在網上搜尋，發現“只有一行文字或者最后一行文字，是沒效果的，默認靠左對齊”。
解決辦法有以下幾個：
1、使用“text-align-last：justify;”意思是告訴電腦，“這是最后一行代碼，也給我兩端對齊了”
.h_text{
text-align-last: justify;
width: 200px;
}
這一行要兩端對齊
但text-align-last并不是所有瀏覽器都兼容。
2、在文字后邊加一行，然后給隱藏了
.h_text{
text-align: justify;
width: 200px;
}
.span_hid{
display: inline-block;
width: 100%;
opacity: 0;
}
這一行要兩端對齊
隱藏的一段代碼
隱藏后文本還是會占位置，影響布局效果不好，而且這么low的行為，不符合一個工程師的身份。
3、在文字后邊加一個空標簽
.h_text{
text-align: justify;
width: 200px;
}
.span_hid{
display: inline-block;
width: 100%;
}
這一行要兩端對齊
嗯，這樣就好多了，但是對IE瀏覽器還是有些問題。
4、這時需要添加“text-justify:inter-ideograph;”大意就是，增加或減少詞間的空格
.h_text{
text-align: justify;
text-justify: inter-ideograph;
width: 200px;
}
.span_hid{
display: inline-block;
width: 100%;
}
這一行要兩端對齊
完美解決了對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%;
}
這 一 行 要 兩 端 對 齊
當然文字少是沒啥問題，但是文字比較多的話，需要一些JS代碼給文字之間加空格。
var text= "這一行要兩端對齊";
var result = text.split("").join(" ");
至于添加after偽類，更加簡潔一些。沒有應用。
項目實例：中國銀河證券APP，以供參考。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/51822.html
摘要：下載安裝的瀏覽器等也沒有問題。但是用安卓手機再帶的瀏覽器，問題就出現了。經過查詢找到一個問題。于是給每個文字之間添加了一個空格，成功解決了各瀏覽器不兼容手機端不兼容的問題。 今天需要切一個響應式網頁，有一行文字，需要實現兩端對齊。 代碼如下： .h_text{ text-align: justify; width: 200px; } 這一行要兩端對齊 根據經驗找到t...
閱讀 2989·2021-10-27 14:16
閱讀 700·2021-10-13 09:39
閱讀 3706·2021-09-29 09:46
閱讀 2097·2019-08-30 15:54
閱讀 2606·2019-08-30 15:52
閱讀 2999·2019-08-30 15:44
閱讀 1110·2019-08-30 15:44
閱讀 505·2019-08-30 10:51
