2016年11月6日

讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧

A+
livia-multiliine-ellipsis-讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧之前寫過「讓標題過長的文字自動省略﹍單行 CSS 技巧」,用來處理單行標題過長的問題。不過最近處理多個網站時,剛好都是旅遊美食類型,文章標題比起一般部落格會長上許多。

在特殊版型下(例如區塊寬度不夠),文章標題使用單行省略文字的方式,不容易辨識主題意涵,會導致點擊率下降。如果能夠使用 2~3 行的高度來顯示標題,超過的部分能自動出現省略符號(ellipsis) "..." 的話,會是比較恰當的作法。

只是多行省略號的 CSS 語法,有跨瀏覽器的問題,要如何處理比較恰當,請見本篇的整理。

(圖片出處: liviatravel.com)


一、多行省略文字的情境


1. 卡片式文章縮圖列表

multi-line-ellipsis-1-讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧

例如這是「首頁最新文章的區塊」,這個版型使用上圖的配置後,由於文章標題的寬度不夠,只顯示 1 行恐怕很多主題會看不出所以然。

改為設定 2 行後,顯示的關鍵字夠多,就能看出主要的意思。額外的好處是,文章標題下方為單行標籤 + 省略號,文章標題使用 2 行的配置讓畫面看起來比較協調。


2. 行動版效果

multi-line-ellipsis-2-讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧

由於手機的寬度不夠,文章標題在很多地方都用得上本篇的技巧。就像上圖「手機模擬畫面(連結需用手機開啟)」,大圖下半部的文章標題適合擺放 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 相關技巧:

2 則留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。