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

資訊專欄INFORMATION COLUMN

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

CoffeX / 3071人閱讀

摘要：先回顧下關(guān)于文本溢出隱藏的方式單行文本當(dāng)然還需要加寬度屬來兼容部分瀏覽。多行文本顯示行數(shù)然后開開心心的開始寫啊寫，代碼如下代碼這是一個(gè)按鈕元樣式這效果。。

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

看這效果，第一感覺很簡單，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代碼


    

        這是一個(gè)按鈕

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

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


    

        

            我在左邊，自適應(yīng)布局

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里面只負(fù)責(zé)存放文本內(nèi)容。
然后就大功告成了。
本文純屬個(gè)人看法，歡迎討論

個(gè)人博客

github

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

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

相關(guān)文章

  • 移動(dòng)前端知識(shí)總結(jié)

    摘要：基礎(chǔ)知識(shí)頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼忽略平臺(tái)中對(duì)郵箱地址的識(shí)別當(dāng)網(wǎng)站添加到主屏幕快速啟動(dòng)方式，可隱藏地址欄，僅針對(duì)的版本以后，上已看不到效果將網(wǎng)站添加到主屏幕快 meta基礎(chǔ)知識(shí)H5頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面 忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼 忽略Android平臺(tái)中對(duì)郵箱地址的識(shí)別 當(dāng)網(wǎng)站添加到主屏幕快...

    gotham 評(píng)論0 收藏0

  • 移動(dòng)前端知識(shí)總結(jié)

    摘要：基礎(chǔ)知識(shí)頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼忽略平臺(tái)中對(duì)郵箱地址的識(shí)別當(dāng)網(wǎng)站添加到主屏幕快速啟動(dòng)方式，可隱藏地址欄，僅針對(duì)的版本以后，上已看不到效果將網(wǎng)站添加到主屏幕快 meta基礎(chǔ)知識(shí)H5頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面 忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼 忽略Android平臺(tái)中對(duì)郵箱地址的識(shí)別 當(dāng)網(wǎng)站添加到主屏幕快...

    MartinDai 評(píng)論0 收藏0

  • 移動(dòng)前端知識(shí)總結(jié)

    摘要：基礎(chǔ)知識(shí)頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼忽略平臺(tái)中對(duì)郵箱地址的識(shí)別當(dāng)網(wǎng)站添加到主屏幕快速啟動(dòng)方式，可隱藏地址欄，僅針對(duì)的版本以后，上已看不到效果將網(wǎng)站添加到主屏幕快 meta基礎(chǔ)知識(shí)H5頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面 忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼 忽略Android平臺(tái)中對(duì)郵箱地址的識(shí)別 當(dāng)網(wǎng)站添加到主屏幕快...

    mengera88 評(píng)論0 收藏0

  • 響應(yīng)式網(wǎng)站開發(fā)基礎(chǔ)

    摘要：搭建添加媒體查詢標(biāo)簽添加標(biāo)簽嵌入標(biāo)簽嵌入因?yàn)樾阅艿脑?，?yīng)該避免使用間斷點(diǎn)的選取彈性常見響應(yīng)模式序號(hào)模式圖解大體流動(dòng)模型掉落列模型活動(dòng)布局模型畫布溢出模型有時(shí)一個(gè)網(wǎng)頁同時(shí)結(jié)合幾種模式，例如掉落列和畫布溢出模型。 準(zhǔn)備工作 遠(yuǎn)程調(diào)試 chrome 瀏覽器設(shè)置 在 chrome 瀏覽器中打開 chrome://inspect 手機(jī)設(shè)置 打開開發(fā)者模式 打開 USB 調(diào)試模式 打開...

    fish 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<