CSS CSS3 網頁開發

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

梅干 2017/10/11

梅問題-免寫程式!透過CSS3將多行文字自動省略,出現....

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


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


支援瀏覽器
Chrome、Safari(可自動省略出現….)
IE、Firefox(隱藏超出文字)

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
當建立好後,會發現到,因此二邊的文字數量不同,因此就會造成長短腳的問題。

梅問題-免寫程式!透過CSS3將多行文字自動省略,出現....
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呀!
梅問題-免寫程式!透過CSS3將多行文字自動省略,出現....
實例展示: