Javascript character limit to full stop

Question

I am consuming an API, and this API has a description. I would like to display this description with a character limit, and if you exceed this limit, add a (...) to the end or go to the last endpoint.

The code I have is something like:

let descricao = document.querySelector('.descricao').
descricao.innerHTML = `<p>${dado.descricao}</p>`

I wish that paragraph had a 130-character limitation, someone knows how to do it?

Answer 1

Just check if the string contains more than 130 characters with .length(). If so, you take the characters from the 1st to 130th with .substr(0,130) and concatenates with "...".

Example:

var dado = {
   // 445 caracteres
   descricao: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

let descricao = document.querySelector('.descricao');
let descricao_txt = dado.descricao;
if(descricao_txt.length > 130) descricao_txt = descricao_txt.substr(0,130)+"...";
descricao.innerHTML = `<p>${descricao_txt}</p>`;

<div class="descricao"></div>

Answer 2

You need to count how many characters this phrase has after you use the substr function that to subtract a string tell from which house it should start and which one it should end in. as in the example below will count 80 characters. it starts at 0 and goes up to 79 which will give 80 characters. I’ll leave a code below exemplified.

const description = 'Commodo tempor consectetur est sunt laboris qui do non anim. Irure do incididunt voluptate ut et esse officia id nisi magna elit nulla laboris. Ullamco et id ullamco sint officia eu veniam tempor pariatur ex veniam aute culpa eiusmod.';

if (description.length >= 80)
   console.log(`${description.substr(0, 79)}...`);
else
   console.log(description);

Answer 3

This is not a direct answer to your question, but it might be useful.

.container{
  width:300px;
}

.single-line{
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  
  background-color: bisque;
}

.multi-line{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;
  background-color: darkkhaki;
}

<div class="container">

  <p class="single-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel maiores, obcaecati repellat cupiditate sed
            aliquam minus modi a autem ducimus fuga, vero quasi dicta molestiae alias impedit est sapiente magni?<p>
  
  <p class="multi-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel maiores, obcaecati repellat cupiditate sed
            aliquam minus modi a autem ducimus fuga, vero quasi dicta molestiae alias impedit est sapiente magni?<p>

</div>

Links:

• CSS text-overflow Property
• line-clamp