CODEWITHSUNDEEP
javascriptjqueryhtmlcsslimit
Rendy Juvi
Rendy Juvi

Reputation: 65

Set Limit on Words and call new Class on the words limit

I had a problem with setting the limit for the description. How to make the ( Read More ) appear when the description total words exceed more than the height of the div? and set the description not more than the div height?

.article-detail {
  height: 160px;
}
<div class="article-detail">
	<span> 
    The potential use cases for Blockchain spans across multiple industries and goes far beyond     just Bitcoin. Financial services, Healthcare, Audit among many others; find your industry       and we will transition you through Blockchain… ( Read more )
  </span>
</div>

EDIT I tried to make "read more" appear when the row of the text pass more than 5 row and will be hidden when the row of the text below 5. Any Idea?

document.getElementById('read-more').addEventListener('click', function(event) {
  event.preventDefault();
  var text = document.querySelector('.bc-testing-detail');
  text.style.height = 'auto';
  text.style.display = 'inline';
  this.style.display = 'none'; //Hide the 'read more' link
});
.article-detail {
  height: 160px;
}

.bc-testing-detail {
  display: block;
  overflow: hidden;
  height: 5.7em;
}
<div class="article-detail">
  <span class="bc-testing-detail"> 
    The potential use cases for Blockchain spans across multiple industries and goes far beyond     just Bitcoin. Financial services, Healthcare, Audit among many others; find your industry       and we will transition you through Blockchain
  </span>
  <a id="read-more" href="#"> ( Read More ) </a>
</div>

Upvotes: 1

Views: 69

Answers (1)

Racil Hilan
Racil Hilan

Reputation: 25351

You need to display your span as block and set it's height to the number of displayed lines x the line height and its overflow to hidden.

Now convert the "read more" to a link and move it outside the span. Add a click event listener to it, which sets the span back to auto height and inline display.

Edit To only show the "read more" link when the text is bigger than the box, you need to compare the visible height clientHeight to the total (visible and invisible) height scrollHeight. The only problem is that there is always a small difference between them due to pixel calculation, so you can check of the difference is too small (say less than 10) and hide the "read more" button.

(function() {
  var more = document.getElementById('read-more');

  more.addEventListener('click', function(event) {
    event.preventDefault();
    var text = document.querySelector('.article-detail span');
    text.style.height = 'auto';
    text.style.display = 'inline';
    this.style.display = 'none'; //Hide the 'read more' link
  });

  var text = document.querySelector('.article-detail span');
  if (text.scrollHeight - text.clientHeight < 10)
    more.click();
})();
.article-detail span {
  display: block;
  overflow: hidden;
  height: 2.2em; //Show 2 lines
  line-height: 1.1em;
}
<div class="article-detail">
  <span>The potential use cases for Blockchain spans across multiple industries and goes far beyond     just Bitcoin. Financial services, Healthcare, Audit among many others; find your industry       and we will transition you through Blockchain. The potential use cases for Blockchain spans across multiple industries and goes far beyond     just Bitcoin. Financial services, Healthcare, Audit among many others; find your industry       and we will transition you through Blockchain</span>
  <a id="read-more" href="#">( Read more )</a>
</div>

Upvotes: 1

Related Questions