CSS, CSS3, 網頁設計

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

梅干2018/07/13
梅問題-[教學]CSS3新屬性,讓多行文字超出時自動隱藏,並出現....
  先前梅干曾分享過透過CSS3的新屬性,就可將文字超出指定範圍時,就自動將文字隱藏並出現...,完全無需使用任何程式語言,以及計算文字長度後,再將多餘的給刪除,但有時遇到中英混雜時,很容易造成截取不完整,或是出現亂碼的問題。
  雖然說CSS3的新的屬性,可將文字超出指定的範圍後,自動隱藏但那只限用於標題,若遇到內文有多行時就失效,而現在有另一個新屬性,可解決多行隱藏的問題,甚至還可控制只顯示多少行,當超出時就自動隱藏,並出現...,因此現在就來看看這個好用的屬性吧!
Step1
首先,將文字放到div的區塊中,並設定區塊大小,當文字超出這區塊就是自動換行。
梅問題-[教學]CSS3新屬性,讓多行文字超出時自動隱藏,並出現....
Step2
接著當輸入下方的語法時,單行超出範圍就會出現...,再輸入-webkit-line-clamp,就可控制多行,比方超出2行要省略,就設為2。
單行省略:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;

多行省略:
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

梅問題-[教學]CSS3新屬性,讓多行文字超出時自動隱藏,並出現....
Step3
當要三行時,只需將-webkit-line-clamp: 設為3時,超出就會自動省略,是不是超EZ的呀!
梅問題-[教學]CSS3新屬性,讓多行文字超出時自動隱藏,並出現....
#範例預覽:

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