CODEWITHSUNDEEP
htmlangular
wheeleruniverse
wheeleruniverse

Reputation: 1635

Angular 2 Binding in HTML to Specific Length

I am creating a list of movies with: 

<li *ngFor="let movie of movies">
   <span class="badge">{{movie.title}}</span>
   {{movie.year}}
</li>

It looks good for some movies, but bad for others. How can I ensure that movie.title will always display 15 characters? Some movies will be less than that I want to add padding to the end and some will be more that I want to trim and add '...' to the end.

Example:

Game of Thrones
Not Game of ...
Some Other M...

Any easy way to do this?

Upvotes: 1

Views: 85

Answers (1)

Vega
Vega

Reputation: 28738

Fix the width of the span and you can do this:

.badge{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 0.5rem) ;
    text-align: left;
}

The li width could be calculated with 'rem's and depending on the space you intend to allocate to it.

This is an approximate styling, it need to be adjusted on your example.

Upvotes: 3

Related Questions