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

文字越界添加...顯示

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

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

在文字後面，添加圖標

有時候會遇到複雜的狀況，須要在這段文字後緊跟一個圖標，當文字溢出時，圖標照常顯示在後面。示例以下，圖中的12是一直要顯示的：

這種狀況下，就須要對標籤佈局進行處理才行，由於 text-overflow 的起做用環境是一個 ‘block’ 狀態下的父元素容器裏。

示例代碼：

<div class='inline-wrap'>
        <div class='block-wrap'>
            <div class='block'>
                Text 1 Text 2 Text 3 Text 4 Text 5
                <div class='icon'>12</div>
            </div>
        </div>
    </div>

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

（完）