在網頁上排版，我們最常希望的就是設定一個固定大小的框，但是如果碰到中文與英文混合的情況，最討厭的就是，很難這定他們的長度與高度，怎麼弄他們的長度不一樣，下面就是一個例子：

"寫一本新書 - a book".mb_chars.limit(15).to_s = "寫一本新書"

"寫一本新書 - a book".truncate(15)            = "寫一本新書 - a book"

"abcdedghijklmnopq".mb_chars.limit(15).to_s = "abcdedghijklmno"

"abcdedghijklmnopq".truncate(15)            = "abcdedghijkl..."

"寫一本新書 - a book".mb_chars.limit(20).to_s = "寫一本新書 - a "

"abcdedghijklmnopq".mb_chars.limit(20).to_s = "abcdedghijklmnopq"

也就是說，我們在 server 上，因為 UTF8 的不定碼數特性，我們不能用 byte 數，或是字元數來算字串寬，要算高，那更是不可能，所以，這造成我們不能用 turncate 簡單的得到一個固定長度字串，更討厭的是，連 length 都是轉換過的，例如：

length 回應的是字元數目："寫一本新書 - a book".length = 14 ，中文英文都會算是一個字元，夠討厭吧！還不要算在作業系統或是瀏覽器上，文字會因為字體有大小寬度（kerning）改變。所以，第一個結論是：

UTF 中文與英文混的字框的確實高寬，是不能在 Server 上設定的。

用 Server 後台算是不對的，那就只能用前台了，還好，以下的 CSS -webkit-line-clamp 好像救星：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 行數

 要更安全的，可以加上 fallback，例如：

line-height: 16px; 
max-height: 32px; 

在這裡，line-height = N，在本例中可以是16px, 2rem,... 等等，max-height 是 = N * 行數，在本例中就是 16px * 2 or 2rem * 2。

討厭的是，-webkit-line-clamp，不是所有的瀏覽器都能用，IE 是一定不能用的，Edge 跟 FireFox 也不能用就很討厭！所以，要安全的話，要加寫支援，大概是這樣：

@supports (-webkit-line-clamp: 4) { 
 div {
  -webkit-line-clamp: 4;
 }
}
@supports not (-webkit-line-clamp: 4) {
 div {
   line-height: 2rem;
   max-height: 4rem;
 }
}

webkit-line-clamp 是個還化外之地，有不少怪怪的問題：

中文支援：在這篇介紹中，說 line-champ 一定要找空白，所以連在一起的中文不能用，我倒是發現中文可以用，沒問題，但是有發現在 Mac Safari 上有出現怪字，我認爲這是 Safari 的問題。 另外，當文字是被 <p> 包起來時（在 rails 中，我們常用的 simple_format 輸出），會發生 「...」不見得問題，這算是個中問題！

斷句的點：webkit-line-clamp 斷的點真的很奇怪，要給他搞怪一百分，中文其實還好，但是英文我有發現 general 給你斷在 gene... 一整個無言，這樣其實問題很大，有些英文斷在不該斷的地方會出事的，中文的問題現在還沒看到，這些讓我覺得 webkit-line-clamp 像是未開發完全，這也是啦，不然大家早就用了。

那，webkit-line-clamp 到底可不可以用呢？好問題，我也不知道，但是我很想用，我是先用 rails 中，我們常用的 simple_format 輸出，simple_format 會將文字依斷句，轉包在 <p> 中，再用 webkit-line-clamp，來輸出，很好用，問題好像也不大，唯一就是英文斷句，這有點恐怖，所以，結論二：

如果你不怕英文亂斷字，可以用 webkit-line-clamp

那要是客戶罵，說斷句錯誤？那我就會換回來，再繼續用 server 來大概算行數了。