Ytukyg

var textHolder = document.querySelector('.demo');

var btn = document.querySelector('.btn');





function Truancate(textHolder, limit) {

  let txt = textHolder.innerHTML;

  if (txt.length > limit) {

    let newText = txt.substr(0, limit) + ' ...';

    textHolder.innerHTML = newText;

  }

}



Truancate(textHolder, textHolder.offsetWidth / 10);







function toggleText() {

  // here i want to show full text...

  // and also -> btn.innerHTML = 'Hide Text' | 'Show Text;

}





btn.addEventListener('click', toggleText);

<section class="demo" id="demo">

  Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long

  line of text so that the words don't wrap when they're not supposed to. Multi-line of course!

</section>



<button class="readMore btn">Read More</button>

var textHolder = document.querySelector('.demo');

var btn = document.querySelector('.btn');



function toggleText() {

  textHolder.classList.toggle("truncate");

}



btn.addEventListener('click', toggleText);

toggleText(); //to truncate at first time

.truncate {

  text-overflow: ellipsis;

  /*BOTH of the following are required for text-overflow (overflow: hidden; and white-space: nowrap;)*/

  overflow: hidden;

  white-space: nowrap;

}

<section class="demo" id="demo">

  Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course!

  Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course!

  Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course!

</section>



<button class="readMore btn">Read More</button>

var textHolder = document.querySelector('.demo');

var fullText = textHolder.innerHTML;

var btn = document.querySelector('.btn');

var textStatus = 'full'; // use this to check the status of text and toggle;



function Truancate(textHolder, limit) {

  let txt = textHolder.innerHTML;

  if (txt.length > limit) {

    let newText = txt.substr(0, limit) + ' ...';

    textHolder.innerHTML = newText;

    textStatus = 'truncated';

  }

}



Truancate(textHolder, textHolder.offsetWidth / 10);



function toggleText() {

  // here i want to show full text...

  // and also -> btn.innerHTML = 'Hide Text' | 'Show Text;

  if (textStatus === 'truncated') {

    textHolder.innerHTML = fullText;

    textStatus = 'full';

  } else {

    Truancate(textHolder, textHolder.offsetWidth / 10);

  }

}





btn.addEventListener('click', toggleText);

<section class="demo" id="demo">

  Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long

  line of text so that the words don't wrap when they're not supposed to. Multi-line of course!

</section>



<button class="readMore btn">Read More</button>

var ReadMore = (function() {

  function ReadMore(limit, readMoreContainerElementSelector) {

    this.limit = limit;

    this.readMoreContainerElementSelector = readMoreContainerElementSelector;

    this.isFullTextShown = false;

    this.initializeReadMore();

  }

  ReadMore.prototype.initializeReadMore = function() {

    this.fullText = document.querySelector(this.readMoreContainerElementSelector + " .readMoreText").innerHTML;

    this.truncatedText = this.fullText.substr(0, this.limit) + ' ...';

    var that = this;

    document.querySelector(this.readMoreContainerElementSelector + " .readMoreButton").addEventListener("click", function() {

      that.performToogle();

    });

    this.performToogle();

  };

  ReadMore.prototype.performToogle = function() {

    var textToDisplay = "";

    var buttonText = "";

    this.isFullTextShown ? (textToDisplay = this.fullText, buttonText = "Read Less" ): (textToDisplay = this.truncatedText, buttonText = "Read More");

    this.isFullTextShown = !this.isFullTextShown;

    document.querySelector(this.readMoreContainerElementSelector + " .readMoreText").innerHTML = textToDisplay;

    document.querySelector(this.readMoreContainerElementSelector + " .readMoreButton").innerHTML = buttonText;

  };

  return ReadMore;

}());



var readmore = new ReadMore(100, "#readMoreContainer1");

var readmore = new ReadMore(50, "#readMoreContainer2");

<div id="readMoreContainer1">

<section class="demo readMoreText" id="demo">

  Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long

  line of text so that the words don't wrap when they're not supposed to. Multi-line of course!

</section>

<button class="readMore btn readMoreButton">Read More</button>

</div>

<hr/>

<div id="readMoreContainer2">

<section class="demo readMoreText" id="demo">

  Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long

  line of text so that the words don't wrap when they're not supposed to. Multi-line of course!

</section>

<button class="readMore btn readMoreButton">Read More</button>

</div>