之前在寫頁(yè)面的時(shí)候用的都是單行文字溢出隱藏，今天遇到了多行文字溢出隱藏，溢出部分用省略號(hào)。我通過(guò)查閱一些資料整理了一下，拿出來(lái)與大家分享一下。
單行文本的溢出隱藏
對(duì)于單行文本溢出 隱藏，text-overflow: ellipsis 就能完美的解決，不過(guò)在使用他時(shí)，一定要結(jié)合 overflow: hidden和 white-space: nowrap;，我有時(shí)就忘記寫了，導(dǎo)致效果出不來(lái)，還讓我找了半天。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>單行文本溢出隱藏</title>
<style>
div{
width: 200px;
height: 300px;
border: 1px solid cyan;
overflow: hidden;/溢出隱藏/
white-space: nowrap;/文字不換行/
text-overflow: ellipsis;/溢出用省略號(hào)代替/
}
</style>
</head>
<body>
<div>
<div>憑借專業(yè)的精神、優(yōu)質(zhì)的團(tuán)隊(duì)、周到的服務(wù)，東方卓越現(xiàn)已成為眾中國(guó)銀行業(yè)協(xié)會(huì)、中國(guó)航空運(yùn)輸協(xié)會(huì)、中國(guó)工商銀行、中國(guó)建設(shè)銀行、鳳凰網(wǎng)、聯(lián)想（北京）、中國(guó)人保等知名企業(yè)的合作伙伴，服務(wù)領(lǐng)域涵蓋金融證券、汽車產(chǎn)業(yè)、時(shí)尚傳媒、互聯(lián)網(wǎng)、地產(chǎn)家居、旅游娛樂(lè)等重點(diǎn)領(lǐng)域。</div>
</div>
</body>
</html>
多行文本的溢出隱藏
我是用偽類標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文本溢出隱藏</title>
<style>
div{
position: relative;
overflow: hidden;
width: 200px;
height: 300px;
line-height: 30px;
font-size: 20px;
border: 1px solid cyan;
}
div:after{
position: absolute;
bottom: 0;
right: 0;
padding:0 5px 1px 45px;
content: '...';/結(jié)尾內(nèi)容換為 ... /
background:url("http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png") repeat-y; /背景是一個(gè)半白半透明的圖片/
}
</style>
</head>
<body>
<div>
憑借專業(yè)的精神、優(yōu)質(zhì)的團(tuán)隊(duì)、周到的服務(wù)，東方卓越現(xiàn)已成為眾中國(guó)銀行業(yè)協(xié)會(huì)、中國(guó)航空運(yùn)輸協(xié)會(huì)、中國(guó)工商銀行、中國(guó)建設(shè)銀行、鳳凰網(wǎng)、聯(lián)想（北京）、中國(guó)人保等知名企業(yè)的合作伙伴，服務(wù)領(lǐng)域涵蓋金融證券、汽車產(chǎn)業(yè)、時(shí)尚傳媒、互聯(lián)網(wǎng)、地產(chǎn)家居、旅游娛樂(lè)等重點(diǎn)領(lǐng)域。憑借專業(yè)的精神、優(yōu)質(zhì)的團(tuán)隊(duì)、周到的服務(wù)，東方卓越現(xiàn)已成為眾中國(guó)銀行業(yè)協(xié)會(huì)、中國(guó)航空運(yùn)輸協(xié)會(huì)、中國(guó)工商銀行、中國(guó)建設(shè)銀行、鳳凰網(wǎng)、聯(lián)想（北京）、中國(guó)人保等知名企業(yè)的合作伙伴，服務(wù)領(lǐng)域涵蓋金融證券、汽車產(chǎn)業(yè)、時(shí)尚傳媒、互聯(lián)網(wǎng)、地產(chǎn)家居、旅游娛樂(lè)等重點(diǎn)領(lǐng)域。
</div>
</body>
</html>
