css多⾏⽂本溢出显⽰省略号（兼容ie）
在⽇常编写页⾯中，我们经常遇到内容⾏数过多时，需要出现 “...” 来处理。但是⼜要考虑IE浏览器或IE内核浏览器的兼容性。
普通实现⽅法：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
  这种⽅法适合于WebKit浏览器及移动端，对于IE浏览器兼容不好。下⾯分享给⼤家⼀种兼容IE的实⽤⽅法。
兼容IE效果图：
html: 
<div class="ellipsis">
<div>
上⽔⼀幅⼩型住宅地今⽇中午截標。現場所⾒，截⾄中午12時，最少接獲14份標書，包括其⼠國際(00025.HK)、宏安地產(01243.HK)、華寶實業、建灝地產
</div>
<span class="ellipsis-after"> ... </span>
</div>
css:
.ellipsis {
  overflow: hidden;
  max-height: 50px;/***** 设置⼏⾏出现省略点 ... 根据line-height *****/
  line-height: 25px;
  margin: 10px;
}
.ellipsis:before {
  content:"";
  float: left;
  width: 5px;
  height: 50px;/***** 跟ellipsis height ⼀样 *****/
}
.ellipsis > *:first-child {
  float: right;
  width: 100%;
  margin-left: -30px;
}
.ellipsis-after {
  content: "\02026";
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  float: right;
  position: relative;
  top: -25px;
  left: 100%;
  width: 50px;
  margin-left: -50px;
  padding-right: 30px;
  text-align: right;
  background-size: 100% 100%;
  /* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  background: -webkit-gradient(linear, left top, right top,from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
box sizing  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
/*********************************************example****************************************************/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body,html{
padding: 0;
margin: 0;
}
*{
padding: 0;
margin: 0;
}
.ellipsis {
overflow: hidden;
max-height: 50px;
line-height: 25px;
margin: 10px;
}
.ellipsis:before {
content:"";
float: left;
width: 5px;
height: 50px;
}
.ellipsis > *:first-child {
float: right;
width: 100%;
/* margin-left: -5px; */
margin-left: -30px;
}
.
ellipsis > *:first-child p{
word-break: break-all;
word-wrap: break-word;
white-space: normal;
}
.ellipsis-after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 50px;
margin-left: -50px;
/* padding-right: 5px; */
padding-right: 30px;
text-align: right;
background-size: 100% 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////            background: -webkit-gradient(linear, left top, right top,from(rgba(255, 255, 255, 0)), to(white), c
olor-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
</style>
<body>
<div class="ellipsis">
  <div>
上⽔⼀幅⼩型住宅地今⽇中午截標。現場所⾒，截⾄中午12時，最少接獲14份標書，包括其⼠國際(00025.HK)、宏安地產(01243.HK)、華寶實業、建灝地產
  </div>
  <span class="ellipsis-after"> ... </span>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。