文本溢出显示省略号

单行溢出省略号显示
.myText{
200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行溢出省略号显示
.myText{
200px;
/*text-overflow: ellipsis;*/
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 1.5;
}

跨浏览器兼容的方案

  1. p {
  2. position:relative;
  3. line-height:1.4em;
  4. /* 3 times the line-height to show 3 lines */
  5. height:4.2em;
  6. overflow:hidden;
  7. }
  8. p::after {
  9. content:"...";
  10. font-weight:bold;
  11. position:absolute;
  12. bottom:0;
  13. right:0;
  14. padding:0 20px 1px 45px;
  15. background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
  16. }
每天进步一点点~~~
原文地址:https://www.cnblogs.com/heshimei/p/7159971.html