免寫程式！透過CSS3將多行文字自動省略，並出現….

　　很早之前曾分享過，透過CSS來截標題，當標題過長時，就會自動省略，並出現….，比用程式來截取字串還要來的準確，也不會因為大小寫，或全形半形，時常造成在截取字串時，產生亂碼的問題發生，但當時分享只能用於單行文字，當是多行文字時，就只能透過overflow來將多餘的文字給隱藏起來，而文字突然被卡掉，跟出現…..，給人的語句感覺完全不同，當出現….時，則會知道，語句未結束，而卡掉時，會給人感覺語句好像不完整，是否未交待完畢。

　　因此為了解決這問題，除了透過後端程式語來解決外，就是透過Javascript，但現在終於可以完全不用再透過，任何的前後端的程式語言，直接使用CSS3，就可以設定多行文字，自動省略文字，並出現….，一來可解決截取字數的問題，二來則可解決長短腳問題，同時透過CSS在顯示的速度更快，因此想知道多行要如何省略文字，現在就一塊來看看吧！

---

支援瀏覽器

---

Step1
由於目前支援line-clamp，只有Chrome與Safari，因此Firefox與IE，需用高度來將超出的文字給隱藏起來。
[css]
p{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: /* 顯示行數 Chrome&Safari /
height: / 顯示高度 IE&Firefox */
}
[/css]

---

Step2
首先，將HTML的架構給建立好。
[html]
<div class="container">
<div class="row post">
<div class="col-xs-6">
<img src="https://ds.minwt.com.tw/img/Content/free/fax_plus/fax_plus_00.jpg" class="img-responsive">
<p>
雖然現在使用E-mail往來較為頻繁，但有些時候，還是需要使用到「傳真」這個功能。不過現在大部份的家裡都不會有傳真機，而到便利商店去傳真的話，又要花錢。如果一個月要傳個幾次的話，總會覺得有點心疼的感覺。現在有個網站可以讓大家線上直接傳真，而且一個月可以提供傳10次都不用花錢喔!!!真的省不少呢。那就是「FAX.PLUS」。只需要註冊一個帳號，就可以每個月免費線上傳真10次喔。除了線上傳真之外，他也有提供手機APP可使用，走在路上就能傳，不用擔心還要找便利商店的問題喔。
</p>
</div>
<div class="col-xs-6">
<img src="https://ds.minwt.com.tw/img/Content/webdesign/chrome-cookie/chrome-cookie_00.jpg" class="img-responsive">
<p>
在網頁中，我們可使用Cookie小餅乾來記錄一些使用者的簡單設定，比方像是會員登入、關閉廣告、點選選單….等，並將這一個值記錄後，儲存在使用的瀏覽器中，而最常被拿來使用的，就是記錄廣告的開關，因此當使用者下次造訪時，就可以直接讀取Cookie中的資訊，看是否要跳廣告，同時Cookie也可以設定儲存的時間，當時間一到後，也會自動將設定值給清除。
</p>
</div>

</div>
</div>
[/html]

---

Step3
當建立好後，會發現到，因此二邊的文字數量不同，因此就會造成長短腳的問題。

---

Step4
這時再加入CSS，將超出的文字給省略，並出現….，這時梅干設定3為3行，因當超過3行時，就會將超出的文字，省略並出現….，而下方的line-height與height，是當Firefox或IE瀏覽器，就將文字自動隱藏並出現。
[css]
p{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-height: 24px;
height: 72px;
}
[/css]

---

Step4
因此當超過3行時，就會省略，並出現….，是不是超EZ呀！

---

實例展示：