如何在Angular Material的mat-slide-toggle中实现文本标签换行

使用mat-slide-toggle组件时，标签文本过长需要换行，且希望标签保持在开关右侧的默认位置。尝试给组件添加.slider类并设置flex-wrap: wrap !important样式但未生效，当前文本已超出容器范围。

原代码示例 #

组件代码：

<mat-slide-toggle class="slider">一段很长的需要换行的标签文本</mat-slide-toggle>

样式代码：

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

问题效果：

解决方案 #

问题出在mat-slide-toggle内部的文本容器默认设置了white-space: nowrap，同时外层的flex布局配置不完整。修改样式如下：

.slider {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
}

.slider .mat-slide-toggle-content {
  white-space: normal;
  /* 可选：限制文本最大宽度，适配开关宽度，数值可根据实际调整 */
  max-width: calc(100% - 48px);
}

说明：

• 给.slider明确设置flex布局并开启换行，同时对齐元素保证开关和标签垂直居中
• 取消内部文本容器的强制不换行设置，让文本自动换行
• 可选的max-width可以避免文本把开关挤到一边，保证布局美观

内容的提问来源于stack exchange，提问作者RDK