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