I'm trying to get text-overflow: ellipsis on the text of a checkbox. How would I do that?
Add a comment
|
2 Answers
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
1 Comment
Robin Dijkhof
Well that was easy
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 {
...
}
}
}
