之前在寫頁面的時候用的都是單行文字溢出隱藏，今天遇到了多行文字溢出隱藏，溢出部分用省略號。我通過查閱一些資料整理了一下，拿出來與大家分享一下。 單行文本的溢出隱藏 對於單行文本溢出 隱藏，text-overflow: ellipsis 就能完美的解決，不過在使用他時，一定要結合 overflow: ...
之前在寫頁面的時候用的都是單行文字溢出隱藏，今天遇到了多行文字溢出隱藏，溢出部分用省略號。我通過查閱一些資料整理了一下，拿出來與大家分享一下。
單行文本的溢出隱藏
對於單行文本溢出 隱藏，text-overflow: ellipsis 就能完美的解決，不過在使用他時，一定要結合 overflow: hidden和 white-space: nowrap;，我有時就忘記寫了，導致效果出不來，還讓我找了半天。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>單行文本溢出隱藏</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 300px; 10 border: 1px solid cyan; 11 overflow: hidden;/*溢出隱藏*/ 12 white-space: nowrap;/*文字不換行*/ 13 text-overflow: ellipsis;/*溢出用省略號代替*/ 14 } 15 </style> 16 </head> 17 <body> 18 <div> 19 <div>憑藉專業的精神、優質的團隊、周到的服務，東方卓越現已成為眾中國銀行業協會、中國航空運輸協會、中國工商銀行、中國建設銀行、鳳凰網、聯想（北京）、中國人保等知名企業的合作伙伴，服務領域涵蓋金融證券、汽車產業、時尚傳媒、互聯網、地產家居、旅游娛樂等重點領域。</div> 20 21 </div> 22 </body> 23 </html>
效果：
多行文本的溢出隱藏
我是用偽類標簽
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>多行文本溢出隱藏</title> 6 <style> 7 div{ 8 position: relative; 9 overflow: hidden; 10 width: 200px; 11 height: 300px; 12 line-height: 30px; 13 font-size: 20px; 14 border: 1px solid cyan; 15 } 16 div:after{ 17 position: absolute; 18 bottom: 0; 19 right: 0; 20 padding:0 5px 1px 45px; 21 content: '...';/*結尾內容換為 ... */ 22 background:url("http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png") repeat-y; /*背景是一個半白半透明的圖片*/ 23 } 24 </style> 25 </head> 26 <body> 27 <div> 28 憑藉專業的精神、優質的團隊、周到的服務，東方卓越現已成為眾中國銀行業協會、中國航空運輸協會、中國工商銀行、中國建設銀行、鳳凰網、聯想（北京）、中國人保等知名企業的合作伙伴，服務領域涵蓋金融證券、汽車產業、時尚傳媒、互聯網、地產家居、旅游娛樂等重點領域。憑藉專業的精神、優質的團隊、周到的服務，東方卓越現已成為眾中國銀行業協會、中國航空運輸協會、中國工商銀行、中國建設銀行、鳳凰網、聯想（北京）、中國人保等知名企業的合作伙伴，服務領域涵蓋金融證券、汽車產業、時尚傳媒、互聯網、地產家居、旅游娛樂等重點領域。 29 </div> 30 </body> 31 </html>
效果：
小伙伴們你們有沒有更好地方法呢，快拿出來分享分享吧！
