之前在写页面的时候用的都是单行文字溢出隐藏，今天遇到了多行文字溢出隐藏，溢出部分用省略号。我通过查阅一些资料整理了一下，拿出来与大家分享一下。
单行文本的溢出隐藏
对于单行文本溢出 隐藏，text-overflow: ellipsis 就能完美的解决，不过在使用他时，一定要结合 overflow: hidden和 white-space: nowrap;，我有时就忘记写了，导致效果出不来，还让我找了半天。
<!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;/溢出用省略号代替/
}
</style>
</head>
<body>
<div>
<div>凭借专业的精神、优质的团队、周到的服务，东方卓越现已成为众中国银行业协会、中国航空运输协会、中国工商银行、中国建设银行、凤凰网、联想（北京）、中国人保等知名企业的合作伙伴，服务领域涵盖金融证券、汽车产业、时尚传媒、互联网、地产家居、旅游娱乐等重点领域。</div>
</div>
</body>
</html>
多行文本的溢出隐藏
我是用伪类标签
<!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: '...';/结尾内容换为 ... /
background:url("http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png") repeat-y; /背景是一个半白半透明的图片/
}
</style>
</head>
<body>
<div>
凭借专业的精神、优质的团队、周到的服务，东方卓越现已成为众中国银行业协会、中国航空运输协会、中国工商银行、中国建设银行、凤凰网、联想（北京）、中国人保等知名企业的合作伙伴，服务领域涵盖金融证券、汽车产业、时尚传媒、互联网、地产家居、旅游娱乐等重点领域。凭借专业的精神、优质的团队、周到的服务，东方卓越现已成为众中国银行业协会、中国航空运输协会、中国工商银行、中国建设银行、凤凰网、联想（北京）、中国人保等知名企业的合作伙伴，服务领域涵盖金融证券、汽车产业、时尚传媒、互联网、地产家居、旅游娱乐等重点领域。
</div>
</body>
</html>
网友评论