angular - Material 单选标签内容不会应用文本换行 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>