在 Material (angular) 中创建一个多行复选框

Question

我有一个复选框，我想要一个带有多行的标签。你怎么能打破这个标签？

 <mat-checkbox>a somewhat longer label!</mat-checkbox>

我用 css 试过

mat-checkbox span { white-space: pre-wrap; }

但这看起来很奇怪

Answer 1

在 github 上有一个关于此的现有问题，但这里有一个解决方法。

要为当前组件设置复选框样式，只需将以下内容添加到 component.css 文件中：

:host::ng-deep.mat-checkbox-layout{
white-space: normal !important;
}

:host::ng-deep.mat-checkbox-inner-container{
    margin-top: 4px;
}

如果您想将其应用于整个应用程序的所有复选框。将以下内容添加到styles.css：

.mat-checkbox-layout{
white-space: normal !important;

}
.mat-checkbox-inner-container{
    margin-top: 4px;
}