一般來說,當我們有需要一段文字只呈現一行的時候,我們需要請程式判斷一行內出現的文字字元數,現在可以讓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是無效的,不過我看有效就是了...另外,他說這篇是基礎阿阿阿阿~~...
沒有留言:
張貼留言