Question

我有大约10段描述文字，它有修复高度，文字溢出y：隐藏。

我添加了JQuery脚本，在“每个段落”的“最后一行”添加省略号。

但是，该脚本仅适用于描述文本的第一段。如何使其适用于其他文本段落？

<div class="description" style="height:85px; overflow-y:hidden;" itemprop="description">
  <a id="a" href="{{ product.url | within: collection }}" itemprop="url"> 
    {{ product.description| strip_html  }}  
  </a>
</div>

<script>
  var $p = $('.description #a');
  var divh = $('.description').height();
  while ($p.outerHeight() > divh) {
  $p.text(function (index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}
</script>

Answer 1

将它扔进循环中。

$('.description #a').each(function() {
  var $p = $(this);
  var divh = $('.description').height();
  while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
      return text.replace(/\W*\s(\S)*$/, '...');
    });
  }
});

这假设您的所有div都具有相同的类，并且您的锚具有相同的ID。如果你需要使它更通用，那就做：

$('div a').each(function() {
    //Rest of code here
});

https://jsfiddle.net/mewcg3zo/1/

在每个固定高度段落的最后一行添加省略号，溢出-y隐藏

1 个答案: