How to toggle Truncate text in JavaScript?

Question

Example here:

How to toggle text from 'truncate' to 'full text'?

like i want to toggle full text when a person clicks on 'read more' button and also hide text when 'hide text' button is clicked

Snippet:

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>

Answer 1

You don't need javascript for this. a simple css text-overflow: ellipsis; can do the trick.

It is a better/standard way to truncate the long text because it will truncate the text display at exact position which is depend on the font-size, width of parent container, etc... that is not possible simply with js. here is a demo:

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>

Note that cutting innerHTML can be dangerous as you may cut at improper position and corrupt the HTML code opening/closing tags...

Answer 2

First you need to store the full text to a variable, never change that variable, then store the truncated text into another variable and finally toggle between those to variable value to set the text to your target element.

Here is the sinppet:

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>