Angular Material 单选按钮自动换行

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 那么你所有的样式都会被封装并且它们不会溢出所以它们不会影响你的子无线电组件。如果您不想这样做，请在 "general" 样式表中应用 CSS 规则。

2) 之后重要的是要有正确的 CSS 选择器，它会覆盖原来的。您可以使用 .example-radio-button > * 之类的通用内容，然后将 white-space 与 !important 结合使用，或者更具体地使用 .example-radio-button .mat-radio-label 之类的选择器，然后您就不需要 !important

可在此处找到工作示例 -> 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;
}

Angular Material 单选按钮自动换行

Angular Material Radio Button Wrap Text

angular

angular-material2