角度材质单选按钮换行文字

Question

如何包装Angular Material单选按钮的文本？

请参阅仓库https://stackblitz.com/edit/angular-material-radio-button-wrap-text

尝试过并且不起作用（根据https://github.com/angular/material2/issues/10954）：

white-space: normal;

有效的方法是使用<span></span>技术。但是为什么这行得通却对white-space: normal不起作用？

Answer 1

解决这个问题有2点。

1）考虑使用ViewEncapsulation，因此我将encapsulation: ViewEncapsulation.None添加到了组件装饰器中。如果未指定ViewEncapsulation.None，则所有样式都将被封装，并且不会渗色，因此不会影响您的子级收音机组件。如果您不想这样做，请在“常规”样式表中应用CSS规则。

2）之后，重要的是要有正确的CSS选择器，它将覆盖原始选择器。您可以使用.example-radio-button > *之类的通用内容，然后与white-space一起定义!important，或者更具体地使用.example-radio-button .mat-radio-label之类的选择器，然后就不需要{{1 }}

可以在此处找到工作示例-> https://stackblitz.com/edit/angular-material-radio-button-wrap-text-paghtt

Answer 2

在style.scss文件中放置以下代码：

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

Answer 3

此变体有效：

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