超過字數出現.....符號(CSS3)
AJframe-超過字數出現.....符號,搭配RWD應用
常常遇到前端樣板寫得美美的,但套了後端以後,有時候資料過多,會讓你美美的版變得很可怕><這邊就來說說怎樣快速優化這些UI
text-overflow是關鍵
當我們給他屬性text-overflow: ellipsis;就會告知瀏覽器..這元件只要超過指定範圍就給他........以本站為例..可以符合RWD又可以出現.....代碼如下
h2 { text-overflow: ellipsis; white-space:nowrap; overflow:hidden; width:100%;}text-overflow: ellipsis; 超過我給的範圍就出現.....
white-space:nowrap; 指定該文本不換行
overflow:hidden; 超過指定範圍就隱藏
width:100%; 因為使用bootstrap grid system,元件沒有給他固定寬xxxpx 而是隨著框架100%顯示
沒了!!就是這麼簡單~
留言
張貼留言