Angular长文本截断问题求助：需实现动态自适应显示

Hey Dave, I’ve run into this exact issue with Angular Material chips before—default styling cuts off long content, which is super frustrating. Let’s get your question text to dynamically adjust instead of getting truncated. Here are the best solutions, ordered by simplicity and effectiveness:

1. Override Material Chip Styles to Allow Wrapping #

The easiest fix is to tweak the default CSS for mat-chip to let text wrap instead of truncating. Material chips use white-space: nowrap and text-overflow: ellipsis by default, so we’ll override those rules:

Add this to your component’s CSS file (or global styles if you want this to apply everywhere):

mat-chip {
  white-space: normal; /* Disable forced single line */
  max-width: 100%; /* Ensure chip doesn't overflow its container */
  word-wrap: break-word; /* Wrap long words to next line */
  line-height: 1.4; /* Improve readability for multi-line text */
}

This will make the chip’s height automatically expand to fit the full question text, no truncation required.

2. Add a Tooltip for Full Content (Fallback/Enhancement) #

Even with wrapping, extremely long text might make the chip too tall or take up too much space. Adding a tooltip gives users an easy way to view the full question on hover:

Update your mat-chip template to include Angular Material’s tooltip directive:

<mat-chip *ngIf="hasSelectedQuestion()" 
          [selectable]="selectable" 
          removable="true" 
          (removed)="deselectQuestion()"
          [matTooltip]="form.controls.question.value.question"
          matTooltipPosition="above"
          matTooltipClass="custom-tooltip">
  {{form.controls.question.value.question}}
  <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>

You can optionally style the tooltip to handle long text too:

.custom-tooltip {
  max-width: 300px; /* Limit tooltip width */
  white-space: pre-line; /* Preserve line breaks if any */
}

3. Adjust Parent Layout for More Space #

Double-check your parent container’s flex layout to make sure the mat-form-field has enough room to expand. Right now you’re using fxLayout="row" and fxFlex—ensure there aren’t any fixed width constraints on the parent divs that might be forcing the chip to truncate.

For example, if the parent container has a fixed width, switch it to fxFlex or remove the fixed width to let it grow with content:

<!-- Ensure parent containers have flexible width -->
<div fxLayout="row" fxLayoutGap="24px" fxFlex>
  <div fxFlex fxLayout="row">
    <mat-form-field appearance="outline" class="pr-4" fxFlex>
      <!-- ... rest of your code ... -->
    </mat-form-field>
  </div>
</div>

Recommendation #

Start with solution 1—it’s the quickest way to eliminate truncation. Add solution 2 as a nice-to-have for better UX with extra-long text. Solution 3 is only needed if your layout is restricting the chip’s width unnecessarily.

内容的提问来源于stack exchange，提问作者Dave Luthwerg