CSS教學-免寫程式透過CSS當字數超出範圍時,自動出現….

梅問題-CSS教學-免寫程式透過CSS就可截取文字
  先前在設計Wordpress版型時,為了讓網頁的版型看起來更整齊,梅干則透過php的方式來計算出字數,當超過多少字數後,就自動出現....,但礙於文字有全形、半形與中英文,因此在計算字數時,時常會出現不是過長就是過短,所以除了可透過程式的方式來處理外,還有一個更簡單的方法,那就是使用CSS的文字屬性就可實現,當文字超過多少寬度時,就自動出現....,如此一來使用者就知道,後面還有文字啦!至於怎麼設定,其實方法很簡單,現在就一塊來看看吧!!

首先,先設定區塊的寬度大小,接著在文字的區塊的樣式中,輸入text-overflow : ellipsis; 屬性,之後只要文字超過300像素時,就會自動出現.....。
梅問題-CSS教學-免寫程式透過CSS就可截取文字
一旦只要文字超過300像素,文字就會自動被截斷,並出現....了,是不是超ez的呀!
梅問題-CSS教學-免寫程式透過CSS就可截取文字
[範例預覽]

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。