*ngIf to check length of title

Question

I have a response from an API where I get back titles. If the title is longer than a certain amount of characters, the card in which the title is displayed grows in height, causing the card to be larger than its siblings in the same row. I want to find a way to trim the title and add '...' at the end of the title so that the title only takes up one line and all cards are the same size.

I am able to display the title if the length is less than 23, but I am unsure of how to format longer titles so that they are 22 characters with '...' added at the end.

This is what I have so far:

<div *ngIf="game.title.length < 23; Dont know what to put here"> 
      <h5 class="card-title">{{game.title}}</h5>
</div>

Answer 1

you can use css instead. On your div you should add a class such as.overflow-ellipse

.overflow-ellipse { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Otherwise you can use substring if you want a specific char count.. but that's not as flexible as the css path https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring