Question

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

.home{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

我尝试过使用CSS

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

但这看起来很奇怪

Answer 1

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

Answer 2

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

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

Answer 3

我看不到任何情况下溢出比多行处理更可取。可以通过将所有mat-checkbox放置在projet的styles.scss文件中（此文件称为@include mat-core();的文件）来解决此问题：

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

在材料（角度）中选中多行复选框

3 个答案: