Limit texts by placing reticence at the end, use of Angularjs

Question

I have a text that describes a certain product, this description will serve as a preview, the ellipsis mark that the text continues, I am using angular

<p ng-bind-html="service.description | limitTo:150 "></p>

This section of the code limits the text perfectly, I would like to know how to insert the reticence at the end of it. Grateful for the attention!

Answer 1

In the first {{}} you display your service.description with the limitation of 150 characters, then you make a check, if the amount (length) of characters is greater than or equal to 150, displays the ellipsis, otherwise.

<p>{{service.description | limitTo:150}}{{service.description.length >= 150 ? '...' : ''}}</p>

Answer 2

You can limit the view with CSS by using the property text-overflow: ellipsis.

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>

That way you don’t lose the information, just limit it visually. If you need to display it completely, you don’t need any scripted programming or even a new request to get the whole text. Just create something like snippet below, which shows the full 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>