垫按钮切换不换行

Question

我正在使用Angular显示一些按钮。我有：

.mat-button-toggle {
    width: 80%;
    min-height: 3em;
    align-self: center;

    font-size: 2em;
    background-color: #76ff03;
    margin: 0.5em 1em;
}


  <mat-button-toggle 
        *ngFor="let button of buttonsFromApi" 
        id="{{button.id}}" class="problemButton" 
        [disabled]="isButtonDisabled(button.authLevel, button.id)" 
        [checked]="isSelected(button.id)"
        (change)="onButtonClick($event, button.authLevel)">
        {{button.displayName}}
  </mat-button-toggle>

现在，当我调整窗口大小时，这不会自动换行：

我已经搜索了互联网，并尝试了flex-wrap: wrap; white-space: normal !important; word-wrap: normal;，并且都使用了!important，但都没有用。如何确保当超出按钮时文本自动换行？

Answer 1

也许

  

溢出包装：断词；

有效

Answer 2

.mat-button-toggle-label-content {
  flex-wrap: wrap !important;
}

解决了！