Angular Material 单选按钮换行文本

Question

Angular Material Radio Button 的文字如何换行？

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

解决这个问题有两点。

1) 考虑 ViewEncapsulation出于这个原因，我已将 encapsulation: ViewEncapsulation.None 添加到您的组件装饰器中。如果您不指定 ViewEncapsulation.None 那么您的所有样式都会被封装并且它们不会溢出，因此它们不会影响您的子 radio 组件。如果您不想这样做，请在“通用”样式表中应用 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