1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. [教學] 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.