材料无线电标签内容不会应用Text Wrap CSS Angular

Question

我有一个固定宽度的无线电组，我想要按钮标签。我已经尝试在html的每个部分添加类，并为元素添加“white-space：normal”，但它只是忽略它。我怎样才能使它工作？

Here is an example of where I am at

如果我将这个CSS添加到顶级styles.scss文件，它按预期工作。

.mat-radio-label-content {
  white-space: normal;
}

但我想避免这种情况，并保持css仅与特定组件相关，而不是广泛应用。

Answer 1

使用选择器将标签文本换行。

    <style>
        .wrap-mat-radio-label {
            white-space: normal;
        }
    </style>

    <mat-radio-group>
        <mat-radio-button>     
            <span class="wrap-mat-radio-label">
                {{ season }}
            </span>
        </mat-radio-button>
    </mat-radio-group>

Answer 2

/ *在“styles.css”* /

.mat-checkbox-layout {
  white-space: normal !important;
}

.mat-radio-label {
    white-space: normal !important;
  }