Angular Material播放按钮包装文字

Question

如何包装角材料播放按钮的文本？

请参阅repo 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）考虑到视图填充，因此我已将encapsulation: ViewEncapsulation.None添加到您的组件装饰器中。如果您不指定ViewEncapsulation.None，则您的所有样式都已封装，并且不会流血，因此它们不会影响您的孩子无线电组件。如果您不想这样做，请在"常规"样式表中应用CSS规则。

2）之后，重要的是要拥有将覆盖原始的正确CSS选择器。您可以使用诸如.example-radio-button > *之类的一般性，然后与!important结合定义white-space，或者与.example-radio-button .mat-radio-label这样的选择器更具体，然后您不需要!important

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

Answer 2

将以下代码放在样式中。Scss文件：

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

Answer 3

此变体工作：

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