css實現文字越界加點點點顯示，并且后面緊跟一個圖標

lemanli 發布于2019-08-01 15:34 / 770人閱讀

摘要：文字越界添加顯示在頁面上，會遇到當文字長度超出一定長度的時候，將超出的部分顯示為的情況，這個功能很好實現，很多人都可以直接寫出來。

文字越界添加...顯示

在HTML頁面上，會遇到當文字長度超出一定長度的時候，將超出的部分顯示為...的情況，這個功能很好實現，很多人都可以直接寫出來。
示例代碼：

.demo {
    display: block;
    text-overflow: ellipsis; //顯示省略符號來代表被修剪的文本，也可以自定義
    overflow: hidden; //溢出內容隱藏
    white-space:nowrap; //強制文本在一行內顯示
}

在文字后面，添加圖標

有時候會遇到復雜的情況，需要在這段文字后緊跟一個圖標，當文字溢出時，圖標照常顯示在后面。示例如下，圖中的12是一直要顯示的：

這種情況下，就需要對標簽布局進行處理才行，因為 text-overflow 的起作用環境是一個 ‘block’ 狀態下的父元素容器里。

示例代碼：

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

（完）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49980.html

css實現文字越界加點點點顯示，并且后面緊跟一個圖標

摘要：文字越界添加顯示在頁面上，會遇到當文字長度超出一定長度的時候，將超出的部分顯示為的情況，這個功能很好實現，很多人都可以直接寫出來。文字越界添加...顯示在HTML頁面上，會遇到當文字長度超出一定長度的時候，將超出的部分顯示為...的情況，這個功能很好實現，很多人都可以直接寫出來。示例代碼： .demo { display: block; text-overflow:...

SwordFly 2019-08-29 11:05 評論0 收藏0
SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 評論0 收藏0
前端基礎入門二（CSS）

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

Lorry_Lu 2019-08-30 15:55 評論0 收藏0
CSS節選——選擇器

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

番茄西紅柿 2019-04-23 13:42 評論0 收藏0