CODEWITHSUNDEEP
angularangular-material
Robin Dijkhof
Robin Dijkhof

Reputation: 19288

Angular Material how to get checkbox text-overflow ellipsis

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

Upvotes: 5

Views: 1827

Answers (2)

Emmanuel
Emmanuel

Reputation: 5395

You can also add text-overflow to .mat-checkbox-layout, like:

.mat-checkbox-layout {
  white-space: no-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 200px
}

Can wrap this in ::ng-deep {} to skip encapsulation when you're in a component. For example to target .mat-checkbox-layout in your current component and child dom:

:host {
  ::ng-deep {
    .mat-checkbox-layout {
      ...
    }
  }
}

Upvotes: 1

Prabhakar Kalaiselvan
Prabhakar Kalaiselvan

Reputation: 68

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

Upvotes: 2

Related Questions