材质单选标签内容不会应用文本换行 CSS Angular [英] Material Radio Label Content Wont Apply Text Wrap CSS Angular

问题描述

我有一个固定宽度的无线电组，我希望按钮标签可以换行.我曾尝试向 html 的每个部分添加类并向元素添加空白:正常"，但它只是忽略了它.我怎样才能让它工作?

I have a radio group with a fixed width and I would like the button labels to wrap. I have tried adding classes to every part of the html and adding "white-space: normal" to the elements but it just ignores it. How can I make it work?

这是我所在位置的示例

如果我将此 CSS 添加到顶级 styles.scss 文件中，它会按预期工作.

If I add this CSS to the top level styles.scss file it works as intended.

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

但我想避免这种情况并保持 css 仅与特定组件相关，而不是应用程序范围.

But I want to avoid this and keep the css only relevant to the specific component and not app wide.

推荐答案

使用选择器将标签文本包裹在一个范围内.

Wrap your label text in a span with a selector.

    <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>

这篇关于材质单选标签内容不会应用文本换行 CSS Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！