Angular Material how to get checkbox text-overflow ellipsis

Issue

I'm trying to get text-overflow: ellipsis on the text of a checkbox. How would I do that?

https://stackblitz.com/edit/angular-a7tmmp

Solution

Add width property to your checkbox. The text-overflow property specifies how overflowed content should be displayed. Since the width is not set (even for its parent elements), the text of checkbox keeps extending without overflow.

See this where I added the width property to one of the checkbox: https://stackblitz.com/edit/angular-a7tmmp-ix64hc

Answered By - Prabhakar Kalaiselvan