国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

techstay / 2405人閱讀

摘要：下載安裝的瀏覽器等也沒有問題。但是用安卓手機(jī)再帶的瀏覽器，問題就出現(xiàn)了。經(jīng)過查詢找到一個(gè)問題。于是給每個(gè)文字之間添加了一個(gè)空格，成功解決了各瀏覽器不兼容手機(jī)端不兼容的問題。

今天需要切一個(gè)響應(yīng)式網(wǎng)頁，有一行文字，需要實(shí)現(xiàn)兩端對齊。

代碼如下：

.h_text{
    text-align: justify;
    width: 200px;
} 

這一行要兩端對齊

根據(jù)經(jīng)驗(yàn)找到text-align:justify;首先用PC端瀏覽器測試，刷新網(wǎng)頁沒起作用。

在網(wǎng)上搜尋，發(fā)現(xiàn)“只有一行文字或者最后一行文字，是沒效果的，默認(rèn)靠左對齊”。

解決辦法有以下幾個(gè)：

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;
}
 


    這一行要兩端對齊
    隱藏的一段代碼

隱藏后文本還是會(huì)占位置，影響布局效果不好，而且這么low的行為，不符合一個(gè)工程師的身份。

3、在文字后邊加一個(gè)空標(biāo)簽

.h_text{
    text-align: justify; 
    width: 200px;
}
.span_hid{
    display: inline-block; 
    width: 100%;
}
 


    這一行要兩端對齊

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

4、這時(shí)需要添加“text-justify:inter-ideograph;”大意就是，增加或減少詞間的空格

.h_text{
    text-align: justify; 
    text-justify: inter-ideograph;
    width: 200px;
} 
.span_hid{ 
    display: inline-block; 
    width: 100%;
}
 


    這一行要兩端對齊

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

如果只兼容PC端瀏覽器，就已經(jīng)解決了。

But，還要兼容手機(jī)瀏覽器。

QQ、微信軟件內(nèi)打開網(wǎng)頁，沒問題。下載安裝的瀏覽器：QQ、UC等也沒有問題。iPhone手機(jī)自帶瀏覽器也沒有問題。
但是用安卓手機(jī)再帶的瀏覽器，問題就出現(xiàn)了。完美的向左靠齊，怎么搞就是沒效果。

于是又重新走了一遍1-4的流程。結(jié)果并沒什么用。

經(jīng)過查詢找到一個(gè)問題。text-align-last，safari 不支持的解決辦法

文章中提到：IE瀏覽器中需要文字間添加空格。那么安卓瀏覽器會(huì)不會(huì)也這樣。

5、于是給每個(gè)文字之間添加了一個(gè)空格，成功解決了各瀏覽器不兼容、手機(jī)端不兼容的問題。

.h_text{ 
    text-align: justify;
    text-justify: inter-ideograph;
    width: 200px;
} 
.span_hid{ 
    display: inline-block;
    width: 100%;
}
 


    這 一 行 要 兩 端 對 齊

當(dāng)然文字少是沒啥問題，但是文字比較多的話，需要一些JS代碼給文字之間加空格。

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

至于添加after偽類，更加簡潔一些。沒有應(yīng)用。

項(xiàng)目實(shí)例：中國銀河證券APP，以供參考。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/51822.html

相關(guān)文章

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

    摘要：下載安裝的瀏覽器等也沒有問題。但是用安卓手機(jī)再帶的瀏覽器，問題就出現(xiàn)了。經(jīng)過查詢找到一個(gè)問題。于是給每個(gè)文字之間添加了一個(gè)空格，成功解決了各瀏覽器不兼容手機(jī)端不兼容的問題。 今天需要切一個(gè)響應(yīng)式網(wǎng)頁，有一行文字，需要實(shí)現(xiàn)兩端對齊。 代碼如下： .h_text{ text-align: justify; width: 200px; } 這一行要兩端對齊 根據(jù)經(jīng)驗(yàn)找到t...

    Bamboy 評論0 收藏0

  • 移動(dòng)端總結(jié)

    摘要：移動(dòng)端的字體最開始的的方案是升級后的方案以前版本降級使用。在處理移動(dòng)端邊框的時(shí)候有兩種方案，其中一種方案就是將還有一種方案就是通過偽類來處理。固定項(xiàng)欄頁面基本上市面上所看到的移動(dòng)端的頁面都是固定頭部和底部，少量的會(huì)加入側(cè)邊工具欄。 1、移動(dòng)端的字體 最開始的的方案是： body { font-family: Helvetica Neue, Helvetica, microsoft...

    leo108 評論0 收藏0

  • 移動(dòng)端總結(jié)

    摘要：移動(dòng)端的字體最開始的的方案是升級后的方案以前版本降級使用。在處理移動(dòng)端邊框的時(shí)候有兩種方案，其中一種方案就是將還有一種方案就是通過偽類來處理。固定項(xiàng)欄頁面基本上市面上所看到的移動(dòng)端的頁面都是固定頭部和底部，少量的會(huì)加入側(cè)邊工具欄。 1、移動(dòng)端的字體 最開始的的方案是： body { font-family: Helvetica Neue, Helvetica, microsoft...

    frank_fun 評論0 收藏0

  • 移動(dòng)端總結(jié)

    摘要：移動(dòng)端的字體最開始的的方案是升級后的方案以前版本降級使用。在處理移動(dòng)端邊框的時(shí)候有兩種方案，其中一種方案就是將還有一種方案就是通過偽類來處理。固定項(xiàng)欄頁面基本上市面上所看到的移動(dòng)端的頁面都是固定頭部和底部，少量的會(huì)加入側(cè)邊工具欄。 1、移動(dòng)端的字體 最開始的的方案是： body { font-family: Helvetica Neue, Helvetica, microsoft...

    cjie 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<