how to limit the amount of characters and put … at the end

Issue

i have a page that shows my product, but this product comes with a very long description

I wanted that when it goes down x amount of characters it would cut in css and show … at the end

<dd class="hiddendescricao deskonly" id="descricao"></dd>
<a (click)="rollDown(sectionRelated)" class="text-secondary">Ver mais</a>

.hiddendescricao {
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
position: relative;
height: 100%;
}


setDescricao() {
document.getElementById('descricao').innerHTML = this.item.item_linkWeb?.linkWeb.descricaoHtml; //<p>Belíssimo buquê de astromélias, feito a mão por nossos profissionais, garante a beleza e o cuidado especial que a pessoa amada merece. Seu fácil cuidado e manutenção permitem que desde de crianças até adultos possam receber esse carinho em forma de flores.</p>
document.getElementById('descricao2').innerHTML = this.item.item_linkWeb?.linkWeb.descricaoHtml; //<p>Belíssimo buquê de astromélias, feito a mão por nossos profissionais, garante a beleza e o cuidado especial que a pessoa amada merece. Seu fácil cuidado e manutenção permitem que desde de crianças até adultos possam receber esse carinho em forma de flores.</p>
}

the problem with my css is that to limit and put the … at the end, is that the description has to go to the end of the line to work, I think limiting by character is better

Solution

Add the max-width property with the value of {n}ch. For example: max-width: 100ch. Then, apply white-space: nowrap, and overflow: hidden to remove the overflow characters. In order to add some dots at the end, add the text-overflow: ellipsis property.

Any character after the value you defined will be removed.

p {
  max-width: 30ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>

If you want to limit the number of lines, you can use the line-clamp properties instead of setting the number of characters (max-width: {n}ch):

display: -webkit-box;
   -webkit-line-clamp: 3; /*   Set the number of lines here  */
   -webkit-box-orient: vertical;

Example:

div {
  max-width: 100px;
}

p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>

Answered By – ChenBr

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0