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屬性只有在單行顯示才會執行自動省略的效果。所以如果想要完美的解決此問題，必須透過後端去控制資料的顯示。

參考資料：

• mobile01
• compass

compass: 使用compass清除浮動

我們經常利用浮動元素來達成頁面的排版，例如將<li>進行浮動來制作水平的菜單，或是浮動<div>來完成兩欄位的排版…等等，下圖為使用浮動來產生兩欄排版的例子:

不過一旦將元素進行浮動後，將導致浮動的元素脫離原本的資訊流，這使得包覆這些浮動元素的外層元素，無法偵測到這些被浮動元素的實際大小，進而影響外層元素的樣式設定，如背景、框線...等等。以下面例子舉例：

html-code:

<div class="content">
  <div class="sidebar">我是sidebar</div>
  <div class="main">我是main</div>
</div>

css-code:

.content {
  background-color: #ccc;
  padding: 1.5em;
}
.sidebar {
  float: left;
  width: 30%;
  background-color: #3498DB;
  height: 150px;
}
.main {
  float: left;
  width: 70%;
  background-color: #2ECC71;
  height: 150px;
}

實際呈現的情形如下圖：

這個問題很多的解決方式，而我採用的解決方式來自於A new micro clearfix hack這邊文章中，程式碼如下：

.content {
  background-color: #ccc;
  padding: 1.5em;
  *zoom: 1;
}
.content:after {
  content: "";
  display: table;
  clear: both;
}

結果如下圖：

而每次要解決這個問題都要打這麼多行的程式碼，實在非常浪費時間。在compass的幫助下，你只需要打一行程式碼，此段程式碼如下：

.content {
  @include pie-clearfix;
}

此段程式碼經過compass編譯後，就會自動產生上述繁瑣的程式碼，使我們節省這些寶貴的時間。

注意事項： 這個解決方法不適用於firefox 3.5之前的版本，如果需要支援firefox 3.5之前的版本，請使用compass提供的另外一個mixin，程式碼如下：

.content {
  @include legacy-pie-clearfix;
}

這段程式碼經過compass編譯後會產生以下的css程式碼:

.content {
  background-color: #ccc;
  padding: 1.5em;
  *zoom: 1;
 }
.content:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

參考資料：

• compass
• A new micro clear fix hack
• How To Clear Floats Without Structural Markup