在日常编写页面中，我们经常遇到内容行数过多时，需要出现 “...” 来处理。但是又要考虑IE浏览器或IE内核浏览器的兼容性。

普通实现方法：

  1. display: -webkit-box;
  2. -webkit-box-orient: vertical;
  3. -webkit-line-clamp: 3;
  4. overflow: hidden;

　　这种方法适合于WebKit浏览器及移动端，对于IE浏览器兼容不好。下面分享给大家一种兼容IE的实用方法。

兼容IE效果图：

html:　　

  1. <div class="ellipsis">
  2.     <div>
  3.         上水一幅小型住宅地今日中午截標。現場所見，截至中午12時，最少接獲14份標書，包括其士國際(00025.HK)、宏安地產(01243.HK)、華寶實業、建灝地產
  4.     </div>
  5.     <span class="ellipsis-after"> ... </span>
  6. </div>

css:

  1. .ellipsis {
  2. 　　overflow: hidden;
  3. 　　max-height: 50px;/***** 设置几行出现省略点 ... 根据line-height *****/
  4. 　　line-height: 25px;
  5. 　　margin: 10px;
  6. }
  7. .ellipsis:before {
  8. 　　content:"";
  9. 　　float: left;
  10. 　　width: 5px;
  11. 　　height: 50px;/***** 跟ellipsis height 一样 *****/
  12. }
  13. .ellipsis > *:first-child {
  14. 　　float: right;
  15. 　　width: 100%;
  16. 　　margin-left: -30px;
  17. }
  18. .ellipsis-after {
  19. 　　content: "\02026";
  20. 　　box-sizing: content-box;
  21. 　　-webkit-box-sizing: content-box;
  22. 　　-moz-box-sizing: content-box;
  23. 　　float: right;
  24. 　　position: relative;
  25. 　　top: -25px;
  26. 　　left: 100%;
  27. 　　width: 50px;
  28. 　　margin-left: -50px;
  29. 　　padding-right: 30px;
  30. 　　text-align: right;
  31. 　　background-size: 100% 100%;
  32. 　　/* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
  33. 　　background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
  34.  
  35. 　　background: -webkit-gradient(linear, left top, right top,from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  36. 　　background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  37. 　　background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  38. 　　background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  39. 　　background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  40. }
  41.  
  42. /*********************************************example****************************************************/
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <style>
  8.         body,html{
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.         *{
  13.             padding: 0;
  14.             margin: 0;
  15.         }
  16.         .ellipsis {
  17.             overflow: hidden;
  18.             max-height: 50px;
  19.             line-height: 25px;
  20.             margin: 10px;
  21.         }
  22.         .ellipsis:before {
  23.             content:"";
  24.             float: left;
  25.             width: 5px;
  26.             height: 50px;
  27.         }
  28.         .ellipsis > *:first-child {
  29.             float: right;
  30.             width: 100%;
  31.             /* margin-left: -5px; */
  32.             margin-left: -30px;
  33.         }
  34.         .ellipsis > *:first-child p{
  35.             word-break: break-all;
  36.             word-wrap: break-word;
  37.             white-space: normal;
  38.         }
  39.         .ellipsis-after {
  40.             content: "\02026";
  41.             box-sizing: content-box;
  42.             -webkit-box-sizing: content-box;
  43.             -moz-box-sizing: content-box;
  44.             float: right;
  45.             position: relative;
  46.             top: -25px;
  47.             left: 100%;
  48.             width: 50px;
  49.             margin-left: -50px;
  50.             /* padding-right: 5px; */
  51.             padding-right: 30px;
  52.             text-align: right;
  53.             background-size: 100% 100%;
  54.             background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
  55.             background: -webkit-gradient(linear, left top, right top,from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  56.             background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  57.             background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  58.             background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  59.             background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  60.         }
  61.     </style>
  62.     <body>
  63.         <div class="ellipsis">
  64.         　　<div>
  65.                 上水一幅小型住宅地今日中午截標。現場所見，截至中午12時，最少接獲14份標書，包括其士國際(00025.HK)、宏安地產(01243.HK)、華寶實業、建灝地產
  66.         　　</div>
  67.         　　<span class="ellipsis-after"> ... </span>
  68.         </div>
  69.     </body>
  70. </html>

css多行文本溢出显示省略号（兼容ie）的更多相关文章

  1. css多行文本溢出显示省略号(…)

    text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(…).但部分浏览器还需要加宽度width属性. css代码: overflow: hidden; text-overf ...

  2. css多行文本溢出显示省略号

    HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...

  3. CSS实现单行、多行文本溢出显示省略号（…）

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  4. CSS和JS实现单行、多行文本溢出显示省略号（该js方法有问题不对）

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  5. 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  6. CSS单行、多行文本溢出显示省略号（……）

    这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...

  7. css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  8. CSS单行、多行文本溢出显示省略号

    如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...

  9. CSS单行、多行文本溢出显示省略号（……）解决方案

    单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...

随机推荐

  1. 20190723_C中使用API函数

    学习关于API函数的格式 #include <stdlib.h> #include <string.h> #include <stdio.h> #pragma wa ...

  2. 关于css里大于号（>)的用法

    之前用的css没涉及到这个问题,今天看到.知道大概用法,但不知道和普通的后代选择器有什么区别.到网上找了,其实w3c的css文档里有很详细明确的介绍(http://www.w3school.com.c ...

  3. 安装requests遇到的坑

    通过pip install requests命令安装,报错,提示“SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed”.百思不得其解,后 ...

  4. 「刷题」卡特兰数&prufer序列

    1.网格 转换模型,翻折容斥出解. 2.有趣的数列 抽象一下模型,把奇数项当作横坐标,偶数项当作纵坐标,就是从n*n矩阵左下角走到右上角并且每一步x<=y的方案数,发现是卡特兰数,关于gcd,可 ...

  5. 如何用CSS实现中间自适应，两边定宽三栏布局

    1.前言 用css实现“两边定宽,中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了,一般当面试者写出一种实现方法之后,面试官还会问你还有没有别的方法,尽量多的写出几种实现方法 ...

  6. jquery.eraser制作擦涂效果

    jquery.eraser制作擦涂效果 <pre><!DOCTYPE html><html> <head> <meta http-equiv=&q ...

  7. mysql并发量过大造成 update语句更新错误

    mysql并发量过大造成 update语句更新错误 在同一字段的时候更新的时候 如果并发量太大 就会更新错误 这个时候只能用 swoole 消息队列更新

  8. linux/ubuntu下最简单好用的python opencv安装教程 ( 解决 imshow, SIFT, SURF, CSRT使用问题)

    希望这篇文章能彻底帮你解决python opencv安装和使用中的常见问题. 懒人请直奔这一节, 一条命令安装 opencv 使用python-opencv常用的问题 在linux中使用python版 ...

  9. [UWP]通过自定义XamlCompositionBrushBase实现图片平铺

    1. 什么是XamlCompositionBrushBase 我早就想试试自定义XamlCompositionBrushBase,但一直没机会.上一篇文章介绍到使用Win2D的BorderEffect ...

  10. PageHelper分页+排序

    使用pageHelper插件来分页,只需在执行sql前用即可 String orderBy = 排序字段 + " desc";//按照(数据库)排序字段 倒序 排序 PageHel ...