Angular 2 Binding in HTML to Specific Length

Question

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?

text-overflow: ellipsis

Vega
– Vega

2017-08-19 18:35:34 +00:00
Commented Aug 19, 2017 at 18:35 — Vega
– Vega, Commented Aug 19, 2017 at 18:35
you need implement the custom pipe

Max Koretskyi
– Max Koretskyi

2017-08-19 18:36:51 +00:00
Commented Aug 19, 2017 at 18:36 — Max Koretskyi
– Max Koretskyi, Commented Aug 19, 2017 at 18:36
Make use of pipes

Rahul Singh
– Rahul Singh

2017-08-19 18:37:20 +00:00
Commented Aug 19, 2017 at 18:37 — Rahul Singh
– Rahul Singh, Commented Aug 19, 2017 at 18:37
I agree with @Vega. It's a good idea to do it via css.

yurzui
– yurzui

2017-08-19 18:37:52 +00:00
Commented Aug 19, 2017 at 18:37 — yurzui
– yurzui, Commented Aug 19, 2017 at 18:37

Vega · Accepted Answer · 2017-08-19 18:55:46Z

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.

answered Aug 19, 2017 at 18:55

Vega

28.8k28 gold badges121 silver badges151 bronze badges

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

2 Comments

wheeleruniverse Over a year ago

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

FAISAL Over a year ago

Neat solution +1

Collectives™ on Stack Overflow

Angular 2 Binding in HTML to Specific Length

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related