Question 177624 in CSS Question posted in
Some basic documentation can be found here.

Css – Angular Material 16: Chip text with overflow

I have in some texts of a Chip some very long texts. I have as well a button on the end of the chip to remove the chip.

I thought I can apply text-overflow: ellipsis for the text but somehow this doesn’t help.

Currently it looks in my sample like

enter image description here

but I want to have look like

enter image description here

Tags:

2

Answers


  1. 0

    Ellipsis works if:

    • the element’s width is set in px and
    • the element has overflow: hidden; and white-space: nowrap;.

    See the live demo.

    HTML:

    <div class='sample-list'>
   <mat-chip-listbox aria-label="Fish selection">
      <mat-chip-option>
         <div class="clip-text">
            Just one fish with some very very long tail
         </div>
         <button matChipRemove>
            <mat-icon>close</mat-icon>
         </button>
      </mat-chip-option>
   </mat-chip-listbox>
</div>

    CSS:

    .sample-list {
  background-color: aqua;
  width: 205px;
}

.clip-text {
  width: 159px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

    Output:

    Screenshot

    Login or Signup to reply.
  2. 0

    Setting a fixed width was not an option for me as the interface needed to be fluid.

    So I did some digging into the source code and found that the chip text label already has the CSS rules needed for truncating text, but this behaviour is overwritten for some reason

    (the details and code references are below the solution):

    Solution

    As a workaround, we have to overwrite the rules, by the following css provided at:

    a) at component level:

    :host ::ng-deep .mdc-evolution-chip-set__chips {
  max-width: 100%;
}

:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
:host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label {
  overflow: hidden;
}

    Example – Parent container that takes all the screen width: https://stackblitz.com/edit/tc5xcb-fvpbyu

    Example – Parent container with fixed width: https://stackblitz.com/edit/tc5xcb-yfytxs

    OR

    b) in global styles.css file:

    .mdc-evolution-chip-set__chips {
  max-width: 100% !important;
}

.mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
.mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
.mat-mdc-standard-chip .mat-mdc-chip-action-label {
  overflow: hidden !important;
}

    Example: https://stackblitz.com/edit/tc5xcb-jrdkjw

    Details

    .mdc-evolution-chip__text-label {
  white-space: nowrap;
  user-select: none;
  text-overflow: ellipsis;
  overflow: hidden;
}

    (the code is in https://github.com/material-components/material-components-web/blob/v14.0.0/packages/mdc-chips/_chip.scss#L215):

    But the behaviour is overwritten in Angular Material source code (v16.0.2), https://github.com/angular/components/blob/16.0.2/src/material/chips/chip.scss#L131:

    // MDC sets `overflow: hidden` on these elements in order to truncate the text. This is
// unnecessary since our chips don't truncate their text and it makes it difficult to style
// the strong focus indicators so we need to override it.

.mdc-evolution-chip__cell--primary,
.mdc-evolution-chip__action--primary,
.mat-mdc-chip-action-label {
  overflow: visible;
}

    There is also an issue opened on Github – https://github.com/angular/components/issues/26584.

    I will follow up on this and update the answer accordingly when the issue gets resolved.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search