知乎是不是應該考慮使用 text-overflow: ellipsis; 了？

據觀察，答案里回答者右邊的「話題經驗」是按字元數而不是字元串寬度截取的，所以我全英文的就吃虧了——那麼短竟然還被截了。

---

這個問題我也注意到了，目前按字數來進行截斷的確是一種比較簡單粗暴的解決方案。其實「優雅降級」更好。

在 text-overflow 之前，通常採取的是另一種 JS 的解決方案：逐個刪除字元並計算出文本所佔用的實際寬度，直到可以被容器完整包含。(這裡面不小心的話會遇到各種性能 issue，需要為每個不固定寬度的文本做寬度緩存，對中文字元這樣的固定寬文本只需緩存一次。所以又涉及了判斷字元是否是中文字元的問題，就又可以扯半天了。)

而現在 text-overflow 已經被納入 CSS3 草案中 (http://www.w3.org/TR/css3-ui/#text-overflow)，而且主流的瀏覽器的最新版本已經全部支持基本的屬性值 clip | ellipsis (https://developer.mozilla.org/En/CSS/Text-overflow#Browser_compatibility)。IE 6.0 (IE 在文本排版方面是毫無爭議的先驅)、Chrome 1.0、Safari 1.3 以上的版本就已經支持 text-overflow，Opera 從 9.0 起支持 -o-text-overflow，11 起支持 text-overflow。而 Firefox 支持較晚，直到 7.0 版本才在千呼萬喚中增加了對這個功能的支持 (雖然現在 Firefox 已經 11 了，但這也就差了半年時間)。不知道知乎上用戶的瀏覽器分布如何，但個人感覺還使用著 Firefox 7 - 的用戶應該不會太多。

所以目前可以做的，就是先用上 text-overflow，然後用 feature detection 的方法來判斷瀏覽器是否支持 text-overflow (比如判斷 document.body.style.textOverflow === undefined)，對於不支持的瀏覽器，fallback 到 JS 計算字元寬度的解決方案。就這兩級，就能支持幾乎所有主流瀏覽器了。感覺開發的成本也不高。

---

text-overflow貌似有一個不足的地方，就是無法觸發截取的事件。

比如我需要在文字被截取的時候，觸發一個事件，去修改titile屬性，使得滑鼠放上去的時候，tips方式顯示完整內容。再文字沒有被截取的時候，不修改title屬性。

如果用text-overflow就囧了。

---

JS Bin

網友的答案，可限制行數。但是現在沒想到怎樣限制字數的方案。

//width:200px;
//height: 32px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 14px


---

text-overflow 貌似只支持單行，不支持多行。

---

推薦閱讀：