省略是非常常見(jiàn)的功能。

簡(jiǎn)單的實(shí)現(xiàn)省略號(hào)

下面的代碼就可以實(shí)現(xiàn)省略號(hào)，超過(guò)寬度的時(shí)候就會(huì)出現(xiàn)省略號(hào)

            .text-name{//寬高是一定要設(shè)置的不然是會(huì)無(wú)效延伸的width: 200rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

稍微復(fù)雜點(diǎn)的情況（動(dòng)態(tài)顯示省略號(hào)）

如果省略號(hào)的右邊還有內(nèi)容，因?yàn)閷挾仁枪潭ǖ?#xff0c;就會(huì)出現(xiàn)中間有空白的情況，而且時(shí)大時(shí)小。這時(shí)候把寬度設(shè)置到父容器上，并且設(shè)置子組件display: inline-block;就可以實(shí)現(xiàn)動(dòng)態(tài)顯示省略號(hào)的功能。

          .text-account {width: 380rpx;.text-name{//寬高是一定要設(shè)置的不然是會(huì)無(wú)效延伸的display: inline-block;//width: 200rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}