自定义截断函数删除所有初始文本

Question

我正在开发 在 jQuery 中显示 more/Show less 脚本。

function ellipsizeTex(id) {
  var el = document.getElementById(id);
  var btn = $("#undo_truncate");
  var wordArray = el.innerHTML.split(' ');
  var initialHtml = el.innerHTML;

  var lessText = function() {
    while (el.scrollHeight > el.offsetHeight) {
      wordArray.pop();
      el.innerHTML = wordArray.join(' ') + '...';
    }
    btn.removeClass('hide-text').addClass('show-text').text("Show more");
  }

  var moreText = function() {
    el.innerHTML = initialHtml;
    el.style.height = "auto";
    btn.removeClass('show-text').addClass('hide-text').text("Show less");
  }
  lessText();
  btn.on('click', function(){
   if($(this).hasClass('show-text')){
     moreText();
    } else {
     lessText();
    }
  });
}

ellipsizeTex('truncared');

#truncared {
  padding: 0 10px;
  background: #fff;
  height: 72px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="subcategory-desc">
  <div id="truncared">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quis aperiam ducimus, ipsa neque, sit illum facilis quas voluptates minus corporis vitae sunt incidunt labore odit quaerat fuga deleniti ex dolores provident consequatur perferendis. Ipsum
      dolores pariatur error voluptate voluptates libero eligendi impedit inventore vero, cupiditate earum obcaecati, minus, ullam reiciendis distinctio dignissimos.</p>
    <p>Voluptatem asperiores exercitationem soluta ipsa magnam ex ipsam voluptatibus minima sequi non, modi vitae assumenda harum nobis mollitia, quis, sed nesciunt blanditiis aperiam ad tenetur totam deserunt, et? A nostrum eveniet, sit et dolores iure quod dolorem, commodi tenetur aspernatur maxime maiores ea fugit quaerat, eius beatae.</p>
  </div>
  <div class="text-center">
    <a href="#" id="undo_truncate" class="show-text btn btn-xs btn-primary">Mai mult</a>
  </div>
</div>

这个脚本有一个错误，我很早就能够发现：点击 "Show more" 后，整个文本按预期显示但是当点击相同的按钮，这次使用 "Show less" 作为文本，框中只剩下“...”省略号。

我做错了什么？

Answer 1

在 moreText 函数中，您将元素的高度设置为自动：

el.style.height = "auto";

在 lessText 函数中还原它，您将修复您的错误。

el.style.height = null;

function ellipsizeTex(id) {
  var el = document.getElementById(id);
  var btn = $("#undo_truncate");
  var wordArray = el.innerHTML.split(' ');
  var initialHtml = el.innerHTML;
  
  var init = function() {
    while (el.scrollHeight > el.offsetHeight) {
   
      wordArray.pop();
      el.innerHTML = wordArray.join(' ') + '...';
    }
    btn.removeClass('hide-text').addClass('show-text').text("Show more");
  }
  
  var lessText = function() {
    el.style.height = null;
    el.innerHTML = wordArray.join(' ') + '...';   
    btn.removeClass('hide-text').addClass('show-text').text("Show more");    
  }

  var moreText = function() {
    el.innerHTML = initialHtml;
    el.style.height = "auto";
    btn.removeClass('show-text').addClass('hide-text').text("Show less");
  }
  init();
  btn.on('click', function(event) {
     event.preventDefault();
   if($(this).hasClass('show-text')){
     moreText();
    } else {
     lessText();
    }
  });
}

ellipsizeTex('truncared');

#truncared {
  padding: 0 10px;
  background: #fff;
  height: 72px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="subcategory-desc">
  <div id="truncared">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quis aperiam ducimus, ipsa neque, sit illum facilis quas voluptates minus corporis vitae sunt incidunt labore odit quaerat fuga deleniti ex dolores provident consequatur perferendis. Ipsum
      dolores pariatur error voluptate voluptates libero eligendi impedit inventore vero, cupiditate earum obcaecati, minus, ullam reiciendis distinctio dignissimos.</p>
    <p>Voluptatem asperiores exercitationem soluta ipsa magnam ex ipsam voluptatibus minima sequi non, modi vitae assumenda harum nobis mollitia, quis, sed nesciunt blanditiis aperiam ad tenetur totam deserunt, et? A nostrum eveniet, sit et dolores iure quod dolorem, commodi tenetur aspernatur maxime maiores ea fugit quaerat, eius beatae.</p>
  </div>
  <div class="text-center">
    <a href="#" id="undo_truncate" class="show-text btn btn-xs btn-primary">Mai mult</a>
  </div>
</div>

自定义截断函数删除所有初始文本

Custom truncate function deletes all the initial text

javascript

jquery

truncate