1

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?

4
  • 1
    text-overflow: ellipsis Commented Aug 19, 2017 at 18:35
  • you need implement the custom pipe Commented Aug 19, 2017 at 18:36
  • Make use of pipes Commented Aug 19, 2017 at 18:37
  • 2
    I agree with @Vega. It's a good idea to do it via css. Commented Aug 19, 2017 at 18:37

1 Answer 1

3

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.

Sign up to request clarification or add additional context in comments.

2 Comments

Thank you. I think styling with CSS opposed to the Angular Pipes is better for this situation.
Neat solution +1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.