好用的 CSS 工具：Less 介紹

這應該算是"怪招"嘛...

http://blog.eztable.com.tw/2011/11/18/introduction-to-less/

建立div的範圍後 讓範圍內的文字超過呈現點點點...(不知道該下什麼標題...)

一般來說，當我們有需要一段文字只呈現一行的時候，我們需要請程式判斷一行內出現的文字字元數，現在可以讓CSS完成這個工作

先建立限制範圍內的div寬高
加入white-space: nowrap; \\使這段文字強制不斷行，因為我們只需要一行而不因為div的寬度限制換行
加入overflow:hidden; \\使超出div寬度的範圍後隱藏
加入text-overflow:ellipsis; \\讓文字超出範圍後可以呈現...

以下為css

p{
      height:18px;
      line-height:18px;
      width:100px;
      white-space: nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

就會變成：

原文：

歷年秋末少見的「南方低壓挾大雨」，這幾天就發生在台灣！繼本月十二日南方低壓挾雨大澆阿里山，破了該站十一月份最大雨量紀錄後，台灣昨起再受到南方低壓雲系影響，台東長濱降下三百六十二毫米的「超大豪雨」，更破了設站以來的最大單日雨量紀錄；氣象局預報中心主任鄭明典表示，往年時序走到十一月中，應已逐漸轉成乾冷天氣型態，「今年的確很特別」。

修改後：
歷年秋末少見的「南方低壓挾大雨」，這幾天就...

測試 firefox、chome、ie7、ie8、ie9 都OK  ie6 去死。


參考：http://mid.lt263.com/mb/divcssjiaocheng/14015.html 不過文中說Firefox是無效的，不過我看有效就是了...另外，他說這篇是基礎阿阿阿阿~~...