最近做的項(xiàng)目發(fā)現(xiàn)一個(gè)問(wèn)題,如果文本過(guò)長(zhǎng)的話會(huì)超出顯示,設(shè)置寬度可以解決,但是這樣文本會(huì)換行,就會(huì)導(dǎo)致某一行的高度比其他行的高度高,造成頁(yè)面結(jié)構(gòu)的混亂,這里可以用css來(lái)解決:
white-space:nowrap 文本不換行 overflow:hidden 多余內(nèi)容將被修建且不可見(jiàn) text-overflow:ellipsis 不可見(jiàn)的內(nèi)容以省略號(hào)的形式向用戶(hù)展示。
成功!
這里就有聰明的同志要問(wèn)了,我要是需要顯示很多行呢,你這一行給我隱藏了我剩下的怎么展示呢?這里其實(shí)也可以用css來(lái)解決:
display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3;(3代表顯示三行,多余省略號(hào)) -webkit-box-orient: vertical;
成功!