I have a text that describes a certain product, this description will serve as a preview, the ellipsis marks that the text continues, I am using angular
<p ng-bind-html="service.description | limitTo:150 "></p>This snippet of the code limits the text perfectly, I would like to know how I insert the ellipsis at the end of it. Thank you for your attention!
You can limit the display with CSS, by using the text-overflow: ellipsis property. .
p {
max-width: 190px; /* Tamanho */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis.</p>In this way you do not lose information, only visually limit it. If you need to display it completely, you do not need any script programming or even re-request to get the whole text. Just create something like the snippet below, which shows the complete content when the mouse cursor is over the paragraph:
p {
max-width: 300px; /* Tamanho */
overflow: hidden;
text-overflow: '... (continuar lendo)';
white-space: nowrap
}
p:hover {
text-overflow: clip;
max-width: none
}<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis.</p> In the first {{}} you display your service.description with 150 character limitation, then you check if the length (length) of characters is greater than or equal to 150, displays the ellipsis, otherwise .
<p>{{service.description | limitTo:150}}{{service.description.length >= 150 ? '...' : ''}}</p>