css - 当空白 : normal Angular Material 时用长标签重新定位复选框检查

Question

我有一个带有长标签的 Angular Material Checkbox。当我为复选框设置 white-space: normal 时，它将文本限制在外部 div 中，但是，它将复选框检查中心与文本对齐，我想对齐复选框检查到左上角。

<mat-checkbox color="primary">
    This is a checkbox with a really long label, I want to wrap on new lines, but also want to align the checkbox check to top left, and it defaults to center left.
</mat-checkbox>

这解决了文本在一行中的问题，但是，导致复选框检查居中左对齐，我想将其移动到左上角。

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

我希望能够将复选框重新定位到左上角，而不是默认的左中 Angular 。

Answer 1

复选框有需要重置的自动边距:

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