利用 CSS 語法 截斷超過寬度的文字

以往超過寬度的文字,要嘛會斷行,要嘛就是得用 js 判斷長度,再截斷超過的文字,並加上 "..." 這樣的流程。

以後不用這麼麻煩,只要使用 text-overflow : ellipsis; 這樣的語法,超過寬度的文字就能自動加上 "...",這樣 對於想控制欄位寬度是一件很方便的事。


張香腸: 不過CSS很像不能處理方塊式的段落文字,僅有單行Orz

Wayne Bot: 剛好是最近的文章 (from 張鑫旭), 提到 chrome 有語法可以處理多行文字,不過要跨瀏覽器還是很困難:

 http://www.zhangxinxu.com/wordpress/2014/04/%E8%87%AA%E9%80%82%E5%BA%94%E8%A1%A8%E6%A0%BC-%E5%AD%97%E7%AC%A6%E6%8D%A2%E8%A1%8C-%E6%BA%A2%E5%87%BA%E7%82%B9%E7%82%B9%E7%82%B9-table-text-overflow-ellipsis-word-wrap-break-all/

張香腸: 是阿。有JQ套件,不過對於網站效能...只好用CSS去蓋了XD

CSS教學-免寫程式透過CSS當字數超出範圍時,自動出現….|梅問題教學網
先前在設計Wordpress版型時,為了讓網頁的版型看起來更整齊,梅干則透過php的方式來計算出字數,當超過多少字數後,就自動出現....,但礙於文字有全形、半形與中英文,因此在計算字數時,時常會出現...

◎ 使用 Google 帳號者,勾選「通知我」可收到後續回覆的 mail!
◎ 沒使用 Google 帳號者,發言身份可選「名稱/網址」,來輸入暱稱
◎ 詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為"複製貼上"的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。