CSS, CSS3, 網頁設計

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

梅干 2017/10/11
梅問題-免寫程式!透過CSS3將多行文字自動省略,出現....
  很早之前曾分享過,透過CSS來截標題,當標題過長時,就會自動省略,並出現....,比用程式來截取字串還要來的準確,也不會因為大小寫,或全形半形,時常造成在截取字串時,產生亂碼的問題發生,但當時分享只能用於單行文字,當是多行文字時,就只能透過overflow來將多餘的文字給隱藏起來,而文字突然被卡掉,跟出現.....,給人的語句感覺完全不同,當出現....時,則會知道,語句未結束,而卡掉時,會給人感覺語句好像不完整,是否未交待完畢。
  因此為了解決這問題,除了透過後端程式語來解決外,就是透過Javascript,但現在終於可以完全不用再透過,任何的前後端的程式語言,直接使用CSS3,就可以設定多行文字,自動省略文字,並出現....,一來可解決截取字數的問題,二來則可解決長短腳問題,同時透過CSS在顯示的速度更快,因此想知道多行要如何省略文字,現在就一塊來看看吧!
支援瀏覽器
Chrome、Safari(可自動省略出現....)
IE、Firefox(隱藏超出文字)

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

Step2
首先,將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>

Step3
當建立好後,會發現到,因此二邊的文字數量不同,因此就會造成長短腳的問題。
梅問題-免寫程式!透過CSS3將多行文字自動省略,出現....
Step4
這時再加入CSS,將超出的文字給省略,並出現....,這時梅干設定3為3行,因當超過3行時,就會將超出的文字,省略並出現....,而下方的line-height與height,是當Firefox或IE瀏覽器,就將文字自動隱藏並出現。
p{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 24px;
  height: 72px;
}

Step4
因此當超過3行時,就會省略,並出現....,是不是超EZ呀!
梅問題-免寫程式!透過CSS3將多行文字自動省略,出現....
實例展示: