成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

手機端單行文字兩端對齊：用css偽類實現(xiàn)

JasonZhang / 1297人閱讀

摘要：今天在做項目的時候碰到這個問題右側(cè)紅線內(nèi)的小標(biāo)題單行兩端對齊。兩端對齊的屬性我們知道是，但是這個屬性有它的局限性只能為或多行文字才能實現(xiàn)兩端對齊。也就是說，在現(xiàn)在的情況下，小標(biāo)題的單行文字僅僅使用是實現(xiàn)不了兩端對齊的。

今天在做項目的時候碰到這個問題：右側(cè)紅線內(nèi)的小標(biāo)題單行兩端對齊。

兩端對齊的css屬性我們知道是text-align:justify，但是這個屬性有它的局限性：
1.display只能為inline或inline-block
2.多行文字才能實現(xiàn)兩端對齊。
也就是說，在現(xiàn)在的情況下，小標(biāo)題的單行文字僅僅使用text-align:justify是實現(xiàn)不了兩端對齊的。
那我們就想辦法把這個『單行文字』變成『多行文字』

怎樣讓一塊內(nèi)容后面多出東西，而又不會使頁面多出垃圾元素呢？嘿嘿，類比清除浮動用到的方法，我們可以很快就想到使用:after偽類來解決問題。

html


    
    
阿斯頓





    
    
阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓





    
    
阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓

css

.small-unit{
    padding: 10px 0;
}
.label{
    position: absolute;
    display: inline-block;
    width: 4em;
    height: 40px;
    text-align: justify;
    overflow: hidden;
}
.label:after{
    display: inline-block;
    content: "";
    width: 4em;
    height: 40px;
    text-align: justify;
    overflow: hidden;
}
.msg{
    display: inline-block;
    margin-left: 5em;
    position: relative;
}
.msg:before{
    content: "：";
    position: absolute;
    left: -1em;
}

效果圖，完美！

注意點

1..label和它的after偽類要部分相同的css屬性，來保證after元素是.label的第二行

{
    display:inline-block;
    text-align: justify;
    overflow: hidden;
    width: 4em;
    height: 40px;
}

2.:冒號推薦寫在.msg元素的before偽類上，寫在label里面或外面都不能滿足需求，具體效果可以自己試試看


或
：

3.最后，將.label元素用絕對定位固定住，順便實現(xiàn)右側(cè)多行的效果。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112218.html

相關(guān)文章

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

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

    Bamboy 評論0 收藏0

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

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

    techstay 評論0 收藏0

  • CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優(yōu)雅

    摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優(yōu)雅，不需要寫冗長的代碼來校驗設(shè)置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細(xì)葉誰裁出，二月春風(fēng)似剪刀。首先，你需要先了解一下漸變的使用技巧。 之前不久，由于自己平時涉獵還算廣泛，總結(jié)了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...

    Berwin 評論0 收藏0

  • CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優(yōu)雅

    摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優(yōu)雅，不需要寫冗長的代碼來校驗設(shè)置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細(xì)葉誰裁出，二月春風(fēng)似剪刀。首先，你需要先了解一下漸變的使用技巧。 之前不久，由于自己平時涉獵還算廣泛，總結(jié)了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...

    MASAILA 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<