[教學] CSS3新屬性，讓多行文字超出時自動隱藏，並出現….

　　先前梅干曾分享過透過CSS3的新屬性，就可將文字超出指定範圍時，就自動將文字隱藏並出現…，完全無需使用任何程式語言，以及計算文字長度後，再將多餘的給刪除，但有時遇到中英混雜時，很容易造成截取不完整，或是出現亂碼的問題。

雖然說CSS3的新的屬性，可將文字超出指定的範圍後，自動隱藏但那只限用於標題，若遇到內文有多行時就失效，而現在有另一個新屬性，可解決多行隱藏的問題，甚至還可控制只顯示多少行，當超出時就自動隱藏，並出現…，因此現在就來看看這個好用的屬性吧！

---

Step1
首先，將文字放到div的區塊中，並設定區塊大小，當文字超出這區塊就是自動換行。

---

Step2
接著當輸入下方的語法時，單行超出範圍就會出現…，再輸入-webkit-line-clamp，就可控制多行，比方超出2行要省略，就設為2。
單行省略：

---

多行省略：

---

---

Step3
當要三行時，只需將-webkit-line-clamp: 設為3時，超出就會自動省略，是不是超EZ的呀！

---

#範例預覽:

See the Pen CSS超出行數，自動隱藏文字並出現…. by minwt (@minwt) on CodePen.