網(wǎng)站建設(shè)專業(yè)性競(jìng)價(jià)賬戶托管公司
省略是非常常見(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;}}