在材质中制作一个多行复选框（角度）答案

【问题标题】：Make a multiline checkbox in Material (angular)在材质中制作一个多行复选框（角度）
【发布时间】：2020-08-15 07:07:52
【问题描述】：

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

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

我尝试过使用 css

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

但这看起来很奇怪

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

按照示例，使用引导文本换行类

<mat-checkbox>
   <div class="text-wrap">
    a somewhat longer label!
   </div>
 </mat-checkbox>

【讨论】：

【解决方案2】：

我没有看到任何溢出比多行更可取的情况。通过将其放置在项目的 styles.scss 文件中（这是调用 @include mat-core(); 的文件），可以解决所有 mat-checkbox 的问题：

@import '~@angular/material/theming';
.mat-checkbox-layout {
  white-space: normal !important;
}
// place the fix before mat-core() mixin
@include mat-core();

【讨论】：

【解决方案3】：

关于此on 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;
}

【讨论】：