2013年6月26日 星期三

compass:文字過多溢出時自動省略

資訊非常豐富是入口型網站、拍賣網站、論壇網站…等等網站的共同特色,這些網站將資訊整理後,並且透過列表方式呈現,使得用戶可以在很短的時間內找到自己有興趣的主題下去閱讀。如下圖(截取至mobile01):

[[MORE]] 我們在制作這種列表的時候,一旦資料的字數過多時,將會導致版面不整齊。 如圖所示:

為了解決這種情形,我們有兩種解決方式:

1.藉由後端來控制資料的顯示字數。 2.透過CSS來控制資料的顯示。 不過第一種解決方式牽扯到後台的操作,所以這邊不會說明第一種方式解決。

使用CSS將過多的字數省略的語法如下:

.title {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis; /* 支援其他瀏覽器 */
  -o-text-overflow: ellipsis; /* 支援其他瀏覽器 */
  text-overflow: ellipsis;
}

加了此段樣式後,圖片中的標題就會變成單行顯示,並且在文字後面加上...的省略符號,如圖所示:

但是每次都要打這麼多行的程式碼,實在非常繁瑣。這時候如果使用compass的mixin,只需要一行程式碼就解決了,大幅減少撰寫程式的時間,程式碼如下:

.title {
  @include ellipsis;
}

這段程式碼將透過compass的編譯器自動轉成上面非常繁瑣的程式碼。

使用限制與缺點:

CSS控制文本溢出省略無法達成多行文字溢出的省略的效果,因為CSS會強制將文本變成單行顯示,而且ellipsis屬性只有在單行顯示才會執行自動省略的效果。所以如果想要完美的解決此問題,必須透過後端去控制資料的顯示。

參考資料:

沒有留言:

張貼留言