本篇文章主要給大家介紹一下在html頁面中如何讓單行文本以及多行文本溢出顯示省略号(…)。
1）單行文本溢出顯示省略号當我們在編寫網頁代碼的時候，肯定會遇到過文字列表中的文字太多超出了我們所寫的寬度，導緻文本換行或者文本超出了界限，這時有人就會說了，讓後台限制一下調用的文字個數不就行了嗎，但是我們在做響應式的時候由于是百分比布局，無法計算一行會顯示多少個文字，所以這并不是一個好的解決方案，我們使用css3就可以輕松的實現，而且簡單好用。
核心css語句：
1、overflow:hidden; （顧名思義超出限定的寬度就隐藏内容）
2、white-space: nowrap; （設置文字在一行顯示不能換行）
3、text-overflow: ellipsis;（規定當文本溢出時顯示省略符号來代表被修剪的文本）
我們具體的代碼效果演示就如下圖所示：（設置ul寬度為300，超出的文字内容讓其自動隐藏并顯示...）
我們在編寫網頁代碼時，有時候新聞列表頁中新聞簡介可能有一行或者多行，我們要如何處理這種問題，讓其超出多行後還能顯示省略号呢，不要慌，我們css還是很強大的，已經給我們提供了方法來處理這種問題了。
核心css語句：
1、-WebKit-line-clamp:2; （用來限制在一個塊元素顯示的文本的行數,2表示最多顯示2行。 為了實現該效果，它需要組合其他的WebKit屬性）
2、display: -webkit-box; （和1結合使用，将對象作為彈性伸縮盒子模型顯示 ）
3、-webkit-box-orient:vertical;（ 和1結合使用 ，設置或檢索伸縮盒對象的子元素的排列方式 。）
4、overflow:hidden; （顧名思義超出限定的寬度就隐藏内容）
5、text-overflow: ellipsis;（規定當文本溢出時顯示省略符号來代表被修剪的文本）
我們具體的代碼效果演示就如下圖所示：（設置段落p寬度為300，超出2行的文字内容讓其自動隐藏并顯示...）
好了，本篇文章就給大家說到這裡，大家自己下來可以自己找例子寫一下試一試到底能不能實現我們所說的效果，以後在寫頁面的的遇到這種問題的時候直接複制使用即可。
每日金句：必須從過去的錯誤學習教訓而非依賴過去的成功。喜歡我的文章的小夥伴記得關注一下哦，每天将為你更新最新知識。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
