css - mat-button-toggle 不换行

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但所有这些都不起作用。如何确保文本超出按钮时换行？

标签： cssangularword-wrap

Answer 1

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

解决了！