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

資訊專欄INFORMATION COLUMN

css實(shí)現(xiàn)文字越界加點(diǎn)點(diǎn)點(diǎn)顯示，并且后面緊跟一個(gè)圖標(biāo)

SwordFly / 4018人閱讀

摘要：文字越界添加顯示在頁(yè)面上，會(huì)遇到當(dāng)文字長(zhǎng)度超出一定長(zhǎng)度的時(shí)候，將超出的部分顯示為的情況，這個(gè)功能很好實(shí)現(xiàn)，很多人都可以直接寫出來(lái)。

文字越界添加...顯示

在HTML頁(yè)面上，會(huì)遇到當(dāng)文字長(zhǎng)度超出一定長(zhǎng)度的時(shí)候，將超出的部分顯示為...的情況，這個(gè)功能很好實(shí)現(xiàn)，很多人都可以直接寫出來(lái)。
示例代碼：

.demo {
    display: block;
    text-overflow: ellipsis; //顯示省略符號(hào)來(lái)代表被修剪的文本，也可以自定義
    overflow: hidden; //溢出內(nèi)容隱藏
    white-space:nowrap; //強(qiáng)制文本在一行內(nèi)顯示
}
在文字后面，添加圖標(biāo)

有時(shí)候會(huì)遇到復(fù)雜的情況，需要在這段文字后緊跟一個(gè)圖標(biāo)，當(dāng)文字溢出時(shí)，圖標(biāo)照常顯示在后面。示例如下，圖中的12是一直要顯示的：

這種情況下，就需要對(duì)標(biāo)簽布局進(jìn)行處理才行，因?yàn)?text-overflow 的起作用環(huán)境是一個(gè) ‘block’ 狀態(tài)下的父元素容器里。

示例代碼：

    

        

            

                Text 1 Text 2 Text 3 Text 4 Text 5
                
12

            

        

    
    .inline-wrap {
        display: inline-block;
        max-width: 100%;
    }
    .block-wrap {
        width: 100%;
    }
    .block {
        position: relative;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-left: 20px;
    }
    .icon {
        position: absolute;
        width: 20px;
        right: 0;
    }

（完）

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

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

相關(guān)文章

  • css實(shí)現(xiàn)文字越界加點(diǎn)點(diǎn)點(diǎn)顯示，并且后面緊跟一個(gè)圖標(biāo)

    摘要：文字越界添加顯示在頁(yè)面上，會(huì)遇到當(dāng)文字長(zhǎng)度超出一定長(zhǎng)度的時(shí)候，將超出的部分顯示為的情況，這個(gè)功能很好實(shí)現(xiàn)，很多人都可以直接寫出來(lái)。 文字越界添加...顯示 在HTML頁(yè)面上，會(huì)遇到當(dāng)文字長(zhǎng)度超出一定長(zhǎng)度的時(shí)候，將超出的部分顯示為...的情況，這個(gè)功能很好實(shí)現(xiàn)，很多人都可以直接寫出來(lái)。示例代碼： .demo { display: block; text-overflow:...

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

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

    摘要：層疊即表示允許以多種方式來(lái)描述樣式，一個(gè)元素可以被渲染呈現(xiàn)出多種樣式?？梢宰寣傩缘淖兓^(guò)程持續(xù)一段時(shí)間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用后，將按一個(gè)曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

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

  • 前端基礎(chǔ)入門二（CSS）

    摘要：輸入的時(shí)候少按一個(gè)鍵瀏覽器兼容問(wèn)題比如使用的選擇器命名，在是無(wú)效的能良好區(qū)分變量命名變量命名是用不要純數(shù)字中文等命名，盡量使用英文字母來(lái)表示。選擇器和類選擇器最大的不同在于使用次數(shù)上。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。 回顧上一節(jié)HTML 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

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

  • CSS節(jié)選——選擇器

    摘要：，，層疊樣式表，請(qǐng)留意層疊概念。為了區(qū)分偽類和偽元素，偽元素采用雙冒號(hào)寫法。常見(jiàn)偽類。常見(jiàn)偽元素。和偽元素的用法和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。CSS，cascading style sheet，層疊樣式表，請(qǐng)留意層疊概念。 css3為了區(qū)分偽類和偽元素，偽元素采用雙冒號(hào)寫法。 常見(jiàn)偽類——:hover,:link,:active,:targ...

    番茄西紅柿 評(píng)論0 收藏0

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

0條評(píng)論

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