HTML技巧篇：如何讓單行文本以及多行文本溢出時顯示省略號(…)

參考：https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc

本篇文章主要給你們介紹一下在html頁面中如何讓單行文本以及多行文本溢出顯示省略號(…)。

1）單行文本溢出顯示省略號

當咱們在編寫網頁代碼的時候，確定會遇到過文字列表中的文字太多超出了咱們所寫的寬度，致使文本換行或者文本超出了界限，這時有人就會說了，讓後臺限制一下調用的文字個數不就好了嗎，可是咱們在作響應式的時候因爲是百分比佈局，沒法計算一行會顯示多少個文字，因此這並非一個好的解決方案，咱們使用css3就能夠輕鬆的實現，並且簡單好用。

核心css語句：

一、overflow:hidden; （顧名思義超出限定的寬度就隱藏內容）

二、white-space: nowrap; （設置文字在一行顯示不能換行）

三、text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來表明被修剪的文本）

咱們具體的代碼效果演示就以下圖所示：（設置ul寬度爲300，超出的文字內容讓其自動隱藏並顯示...）

2）多行文本溢出顯示省略號

咱們在編寫網頁代碼時，有時候新聞列表頁中新聞簡介可能有一行或者多行，咱們要如何處理這種問題，讓其超出多行後還能顯示省略號呢，不要慌，咱們css仍是很強大的，已經給咱們提供了方法來處理這種問題了。

核心css語句：

一、-webkit-line-clamp:2; （用來限制在一個塊元素顯示的文本的行數,2表示最多顯示2行。 爲了實現該效果，它須要組合其餘的WebKit屬性）

二、display: -webkit-box; （和1結合使用，將對象做爲彈性伸縮盒子模型顯示 ）

三、-webkit-box-orient:vertical;（ 和1結合使用 ，設置或檢索伸縮盒對象的子元素的排列方式 。）

四、overflow:hidden; （顧名思義超出限定的寬度就隱藏內容）

五、text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來表明被修剪的文本）

咱們具體的代碼效果演示就以下圖所示：（設置段落p寬度爲300，超出2行的文字內容讓其自動隱藏並顯示...）

好了，本篇文章就給你們說到這裏，你們本身下來能夠本身找例子寫一下試一試到底能不能實現咱們所說的效果，之後在寫頁面的的遇到這種問題的時候直接複製使用便可。

每日金句：必須從過去的錯誤學習教訓而非依賴過去的成功。喜歡個人文章的小夥伴記得關注一下哦，天天將爲你更新最新知識。