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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.