css 如何在mat-slide-toggle中环绕文本标签(角形材料)

uidvcgyl 于 2023-01-27 发布在其他

关注(0)|答案(1)|浏览(113)

我想使用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;
}

您可以看到容器x1c 0d1x外部的措辞

1条答案

最有可能的是，您必须使用：：ng-deep深入到文本内容。
如果你不知道的话，“mat”元素通常是由各种各样的其他元素组合在一起的。例如，下面是引擎盖下的样子。

在这个例子中，<span class=""mat-slide-toggle-content></span>实际上是文本所在的位置。所以当你在'slider'类中应用文本换行时，它实际上并没有影响正确的元素。我们可以看到这个类是缺少文本换行的原因。

你可以用途：：ng-deep来深入了解这些样式。因此，不要使用你正在尝试的样式，而是尝试类似以下的样式：

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