实现单行、多行——文本溢出显示省略号

一、单行溢出
单行文本的溢出显示省略号，这种做法我们通常用text-overflow来实现，然后给元素定宽，超出隐藏

 

.txt {
  width: 444px;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 

 

二、多行文本溢出

1、采用的:after来解决的

 

.texts {
  width: 444px;
  overflow: hidden;
  position: relative;
  line-height: 1.4em;
}
.texts::after {
  content: "...";
  font-weight: bold;
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 30px;
  background: -webkit-linear-gradient(left, transparent, #fff 62%);
  background: -o-linear-gradient(right, transparent, #fff 62%);
  background: -moz-linear-gradient(right, transparent, #fff 62%);
  background: linear-gradient(to right, transparent, #fff 62%);
}

 

 

2、js的方法来实现

 

<div class="imitate_ellipsis">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown</p>
</div>

 

 

 

 

.imitate_ellipsis {
    overflow: hidden;
    width: 100%;
    height: 96px;
    text-align: justify;
    text-justify: inter-cluster;
    margin-bottom: 16px;
}
.imitate_ellipsis p {
    margin: 0;
    line-height: 1.4em;
}

 

 

 

 

<script type="text/javascript">
  $(".imitate_ellipsis").each(function(i){
    var divH = $(this).height();
    var $p = $("p", $(this)).eq(0);
    while ($p.outerHeight() > divH) {
      $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/,"..."));
    };
  });
</script>