之前寫過「讓標題過長的文字自動省略﹍單行 CSS 技巧」，用來處理單行標題過長的問題。不過最近處理多個網站時，剛好都是旅遊美食類型，文章標題比起一般部落格會長上許多。在特殊版型下(例如區塊寬度不夠)，文章標題使用單行省略文字的方式，不容易辨識主題意涵，會導致點擊率下降。如果能夠使用 2~3 行的高度來顯示標題，超過的部分能自動出現省略符號(ellipsis) "..." 的話，會是比較恰當的作法。
只是多行省略號的 CSS 語法，有跨瀏覽器的問題，要如何處理比較恰當，請見本篇的整理。
(圖片出處: liviatravel.com)
一、多行省略文字的情境
1. 卡片式文章縮圖列表
例如這是「首頁最新文章的區塊」，這個版型使用上圖的配置後，由於文章標題的寬度不夠，只顯示 1 行恐怕很多主題會看不出所以然。
改為設定 2 行後，顯示的關鍵字夠多，就能看出主要的意思。額外的好處是，文章標題下方為單行標籤 + 省略號，文章標題使用 2 行的配置讓畫面看起來比較協調。
2. 行動版效果
由於手機的寬度不夠，文章標題在很多地方都用得上本篇的技巧。就像上圖「手機模擬畫面(連結需用手機開啟)」，大圖下半部的文章標題適合擺放 2 行文字 + 省略號，來呈現較為完整的訊息。
另外小縮圖右邊的文章標題，由於高度足夠，就可擺 3 行文字 + 省略號，讓左右高度能夠均衡。
二、跨瀏覽器 CSS 語法
這裡先列出通用的語法邏輯：
<style>
.multi_ellipsis {
display: block; // 如果不是區塊元素的話，要加這一行
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: N;// N 填入要顯示的行數
line-height: X;// X 填入行高 px 值
height: X * N;// 限定高度為 X * N 的 px 值
}
</style>
<div class="multi_ellipsis">文章標題文字</div>上半部 style 標籤內是 CSS 設定，下面 div 標籤內是文章標題。
- 紅字 multi_ellipsis 可改為自訂的 class 名稱，兩處的紅字必須一致。
- display: block 這一行一般不需要使用，但如果用在行內元素，例如 span, a 的話，就必須加這一行，後面的高度設定才能生效。
- 藍字這 4 行，是多行產生省略號的關鍵，但是很可惜只有 webkit 瀏覽器有支援，例如 Chrome、Safari、Opera。
- 為了讓 FF、IE 等瀏覽器，能處理多行文字自動省略(但無法產生省略號)，必須加入橘字這兩行。
- 橘字兩行按照綠字註解填入對應的 px 值，即可限制文字出現的行數，超出的部分會被隱藏起來。
- FF、IE 也有產生省略號的語法，網路上可找到 CSS 技巧，但不建議使用，因為當文字較短時，照樣會出現省略號，造成畫面不美觀。
瞭解 CSS 語法後，以下來看實例。
三、多行省略文字範例
以下是 HTML 原始碼：
<style>.multi_ellipsis {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 限制文字只出現 3 行, 結尾出現省略號
line-height: 24px;
height: 72px;
}</style>
<div class="multi_ellipsis">文章出處為「可商業用途及修改的高畫質免費 CC0 圖庫整理」，只要我們使用了 CC0 或 Public Domain 的圖片後，就可以安心的對圖片做這些處置：商業使用、任意修改、不必標示出處。需要注意的地方為，CC0 雖然原作者放棄了著作相關權利，但不代表可以將著作權佔為己有，不可將圖片下載、或經過編修後，逕自宣稱「我才是圖片的原創者」，或「版權所有請勿盜用」。用 Google 搜尋關鍵字 "CC0" 就能找到很多圖庫網站資料，以下的名單依照圖片被 Google 收錄的數量來排序，同時這些都是水準很高的圖庫：</div>以下為展示效果：
文章出處為「可商業用途及修改的高畫質免費 CC0 圖庫整理」，只要我們使用了 CC0 或 Public Domain 的圖片後，就可以安心的對圖片做這些處置：商業使用、任意修改、不必標示出處。需要注意的地方為，CC0 雖然原作者放棄了著作相關權利，但不代表可以將著作權佔為己有，不可將圖片下載、或經過編修後，逕自宣稱「我才是圖片的原創者」，或「版權所有請勿盜用」。用 Google 搜尋關鍵字 "CC0" 就能找到很多圖庫網站資料，以下的名單依照圖片被 Google 收錄的數量來排序，同時這些都是水準很高的圖庫：
可分別使用 Chrome、FireFox 觀看，效果會不一樣。
四、其他解決方案
1. Javascript
有個 jQuery 外掛「dotdotdot」，可處理多行文字，一律加上省略號 "..."。
不過如果是 WFU 的話，不太想因為這個小功能而多裝一個外掛，可參考「為何部落格最好避免第三方外掛？」。
用 JS 處理的另一個缺點是，在某些情況下，截斷處剛好是全形符號的話，會截成亂碼。
2. HTML5
HTML5 提供了新的標籤 "detail" 及 "summary" 可處理省略文字的問題，不過太新的規格總是會有 "某些瀏覽器" 不支援，詳情可參考這篇「The details and summary elements」。
在新技術普及之前，可能本篇的方式還是目前的最佳解。
更多 CSS 相關技巧：