如何将文本 label 包裹在 mat-slide-toggle（角度材料）中

Question

我想使用 mat-slide-toggle，但要将标题换行（因为它有点长）。 我怎样才能做到这一点。 我只想让标题换行并将其默认位置保留在切换按钮的右侧

<mat-slide-toggle class="slider">A really long title wrapped</mat-slide-toggle>

我试过flex-wrap但没有用

.slider {
  flex-wrap: wrap !important;
  font-size: 13px;
}

你可以看到措辞是如何从容器外面出来的

Answer 1

您很可能必须使用 ::ng-deep 深入到文本内容。

如果您不知道，“mat”元素通常由各种其他元素组成并组合在一起。 例如，这是引擎盖下的样子。

在这种情况下， <span class=""mat-slide-toggle-content></span>实际上是文本所在的位置。 因此，当您将文本换行应用于“滑块”class 时，它实际上并没有影响正确的元素。 我们可以看到这个 class 是造成文本换行不足的原因。

要深入了解这些 styles，您可以使用 ::ng-deep。 因此，而不是你正在尝试的，尝试这样的事情：

::ng-deep .mat-slide-toggle-label .mat-slide-toggle-content {
     white-space: normal;
     overflow: visible;
     text-overflow: unset;
}