詳解flex實現(xiàn)左右布局中按鈕溢出隱藏效果

發(fā)布時間：2018-12-03 15:54:50 作者：pingan8787

我要評論

這篇文章主要介紹了詳解flex實現(xiàn)左右布局中按鈕溢出隱藏效果的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近在開發(fā)公司項目的時候UI設(shè)計稿給了這么一個設(shè)計(這里是我手動畫的草圖)：

看這效果，第一感覺很簡單，flex布局，左邊寬度自適應(yīng)，右邊固定寬度。

先回顧下關(guān)于文本溢出隱藏的方式：

/* 單行文本 */
.text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /*當(dāng)然還需要加寬度width屬來兼容部分瀏覽。*/
}

/* 多行文本 */
.text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    /* -webkit-line-clamp 顯示行數(shù) */
}

然后開開心心的開始寫啊寫，代碼如下：

HTML代碼

<div id="flex">
    <div id="left">
        <span>這是一個按鈕</span>
    </div>
    <div id="right">
        <span>9.9元</span>
    </div>
</div>

CSS樣式

#flex {
    display: flex;
}

#left {
    flex: 1;
}
#left{
    background: red;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
#left span{
    background-color: yellow;
    border-radius: 30px;
    border: 1px solid blue;
    display: inline-block;
}

#right {
    background: green;
    width: 200px;
    margin-left: 10px;
}

這效果。。有點無語。。右邊的圓角去哪里了呢，并且在控制臺查看元素，會看到實際span元素的寬度非常的寬，且超過父容器#left，而#left實實在在的還是正常的寬度。
思考了一會，腦子了出現(xiàn)了各種元素的層疊關(guān)系，于是給實際文本內(nèi)容外面，再添加一層div，來控制內(nèi)容的寬度。

HTML代碼

<div id="flex">
    <div id="left">
        <div class="box">
            <span>我在左邊，自適應(yīng)布局</span>
        </div>
    </div>
    <div id="right">我在右邊，定寬</div>
</div>

CSS樣式

#flex {
    display: flex;
}

#left {
    flex: 1;
    background: red;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* 新增的內(nèi)容的父容器 */
#left .box{
    background: red;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    border: 1px solid blue;
    border-radius: 100px;
    display: inline-block;
}
#left span{
    background-color: yellow;
    border-radius: 30px;
}

#right {
    background: green;
    width: 200px;
    margin-left: 10px;
}

而這里只需把原本設(shè)置在span上的寬度，邊框，圓角和背景色樣式，寫到父容器.box上就可以，span里面只負責(zé)存放文本內(nèi)容。

然后就大功告成了。以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

Tag：按鈕溢出左右布局 Flex

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

詳解flex實現(xiàn)左右布局中按鈕溢出隱藏效果

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容