cssは文字の境界を越えて点の表示を実現して、しかも後ろに1つのアイコンが続いています

テキスト境界を越えて追加...表示

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

(完)