文字溢出隐藏，隐藏的问字用省略号表示 - 那一刻~~~掩护你_H5之家

　　之前在写页面的时候用的都是单行文字溢出隐藏，今天遇到了多行文字溢出隐藏，溢出部分用省略号。我通过查阅一些资料整理了一下，拿出来与大家分享一下。

　　单行文本的溢出隐藏

，我有时就忘记写了，导致效果出不来，还让我找了半天。

1 <!DOCTYPE html> 2 <html> 3 <head> > 5 <title>单行文本溢出隐藏</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 300px; 10 border: 1px solid cyan; white-space: nowrap;text-overflow: ellipsis; } 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> > 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; ;background:url() repeat-y; } 24 </style> 25 </head> 26 <body> 27 <div> 28 凭借专业的精神、优质的团队、周到的服务，东方卓越现已成为众中国银行业协会、中国航空运输协会、中国工商银行、中国建设银行、凤凰网、联想（北京）、中国人保等知名企业的合作伙伴，服务领域涵盖金融证券、汽车产业、时尚传媒、互联网、地产家居、旅游娱乐等重点领域。凭借专业的精神、优质的团队、周到的服务，东方卓越现已成为众中国银行业协会、中国航空运输协会、中国工商银行、中国建设银行、凤凰网、联想（北京）、中国人保等知名企业的合作伙伴，服务领域涵盖金融证券、汽车产业、时尚传媒、互联网、地产家居、旅游娱乐等重点领域。 29 </div> 30 </body> 31 </html>

效果：

　　小伙伴们你们有没有更好地方法呢，快拿出来分享分享吧！