在w3cschool中css3中有個(gè)文本相關(guān)的屬性text-overflow,當(dāng)把它設(shè)為ellipsis時(shí)文本溢出內(nèi)容就能顯示為省略標(biāo)記,而設(shè)為clip時(shí)就能把文本溢出的部分裁切掉,當(dāng)然,前提是設(shè)置好兩個(gè)屬性,那就是white-space:nowrap(強(qiáng)制文本在一行內(nèi)顯示)及overflow:hidden(溢出內(nèi)容為隱藏),也就是要同時(shí)有
{
text-overflow:ellipsis或clip;
white-space:nowrap;
overflow:hidden;
}
因?yàn)橹坝杏眠^(guò)不少次這個(gè)屬性,而且用得也都很順利,所以最近在弄一些table的時(shí)候遇到了td內(nèi)的內(nèi)容太多而出現(xiàn)換行從而影響整體的美觀的問(wèn)題,所以我想把文本不換行而且讓超出的文本能顯示為省略號(hào),于是我就很自然的就去用了上面那三屬性并且也為td設(shè)置了長(zhǎng)度和寬度,結(jié)果神了奇,一直沒(méi)把超出的文本內(nèi)容給換成省略號(hào),嘗試排除了各種我覺(jué)得有可能的影響后依舊不能解決,于是我只好去google一下,后來(lái)終于找到了原因,就是要在table的樣式里定義一個(gè)屬性 ,綜上,要想解決表格里面使用text-overflow后依舊不能隱藏超出的文本的問(wèn)題,就必須完整的使用下面這些屬性
td{
text-overflow:ellipsis或clip;
white-space:nowrap;
overflow:hidden;
width:**px;
}
table{
;
}
還有如果想鼠標(biāo)移動(dòng)上去時(shí)顯示被隱藏的文本內(nèi)容,還可以設(shè)置
td:hover
{
text-overflow:inherit;
overflow:visible;
}
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)
點(diǎn)擊舉報(bào)。