站長資訊網(wǎng)之前在寫頁面的時候用的都是單行文字溢出隱藏，今天遇到了多行文字溢出隱藏，溢出部分用省略號。我通過查閱一些資料整理了一下，拿出來與大家分享一下。
單行文本的溢出隱藏
對于單行文本溢出 隱藏，text-overflow: ellipsis 就能完美的解決，不過在使用他時，一定要結(jié)合 overflow: hidden和 white-space: nowrap;，我有時就忘記寫了，導(dǎo)致效果出不來，還讓我找了半天。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>單行文本溢出隱藏</title> 6 <style> 7 p{ 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 <p> 19 <p>憑借專業(yè)的精神、優(yōu)質(zhì)的團隊、周到的服務(wù)，東方卓越現(xiàn)已成為眾中國銀行業(yè)協(xié)會、中國航空運輸協(xié)會、 中國工商銀行、中國建設(shè)銀行、鳳凰網(wǎng)、聯(lián)想（北京）、中國人保等知名企業(yè)的合作伙伴，服務(wù)領(lǐng)域涵蓋金融證券、 汽車產(chǎn)業(yè)、時尚傳媒、互聯(lián)網(wǎng)、地產(chǎn)家居、旅游娛樂等重點領(lǐng)域。</p> 20 21 </p> 22 </body> 23 </html>
效果：
多行文本的溢出隱藏
我是用偽類標簽
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>多行文本溢出隱藏</title> 6 <style> 7 p{ 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 p:after{ 17 position: absolute; 18 bottom: 0; 19 right: 0; 20 padding:0 5px 1px 45px; 21 content: '...';/*結(jié)尾內(nèi)容換為 ... */ 22 background:url("") repeat-y; /*背景是一個半白半透明的圖片*/ 23 } 24 </style> 25 </head> 26 <body> 27 <p> 28 憑借專業(yè)的精神、優(yōu)質(zhì)的團隊、周到的服務(wù)，東方卓越現(xiàn)已成為眾中國銀行業(yè)協(xié)會、 中國航空運輸協(xié)會、中國工商銀行、中國建設(shè)銀行、鳳凰網(wǎng)、聯(lián)想（北京）、中國人保等知名企業(yè)的合作伙伴， 服務(wù)領(lǐng)域涵蓋金融證券、汽車產(chǎn)業(yè)、時尚傳媒、互聯(lián)網(wǎng)、地產(chǎn)家居、旅游娛樂等重點領(lǐng)域。憑借專業(yè)的精神、優(yōu)質(zhì)的團隊、 周到的服務(wù)，東方卓越現(xiàn)已成為眾中國銀行業(yè)協(xié)會、中國航空運輸協(xié)會、中國工商銀行、中國建設(shè)銀行、鳳凰網(wǎng)、 聯(lián)想（北京）、中國人保等知名企業(yè)的合作伙伴，服務(wù)領(lǐng)域涵蓋金融證券、汽車產(chǎn)業(yè)、時尚傳媒、互聯(lián)網(wǎng)、地產(chǎn)家居、 旅游娛樂等重點領(lǐng)域。 29 </p> 30 </body> 31 </html>
效果：
小伙伴們你們有沒有更好地方法呢，快拿出來分享分享吧！
