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>

S.Serpooshan · Accepted Answer · 2018-11-20 05:23:33Z

15

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...

edited Nov 20, 2018 at 5:23

answered Nov 20, 2018 at 5:06

S.Serpooshan

7,5605 gold badges36 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Towkir Over a year ago

a better answer indeed :)

Rohit Gupta Over a year ago

Sir, You are a gentleman and a scholar. This is literally saved me so much time. Thank you.

S.Serpooshan Over a year ago

@RohitGupta Glad to hear it was useful for you!

Towkir · Accepted Answer · 2018-11-20 05:08:29Z

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>

Collectives™ on Stack Overflow

How to toggle Truncate text in JavaScript?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related