超過字數出現.....符號(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%顯示
沒了!!就是這麼簡單~