Angular Material checkbox长文本超出容器如何实现自动换行？

核心原因 #

Angular Material的mat-checkbox默认给标签文本设置了white-space: nowrap属性，导致长文本不会自动换行，会超出父容器边界。

可行解决方案 #

方案1：直接复用你已有的自定义容器 #

你已经给文本套了.text-wrap类的div，只需要给这个类添加以下CSS样式即可：

.text-wrap {
  /* 允许文本自动换行 */
  white-space: normal;
  /* 超长单词/无空格文本也能强制断行，避免溢出 */
  word-break: break-word;
  /* 可选：调整行高，优化多行文本的可读性 */
  line-height: 1.5;
}
/* 给mat-checkbox本身加宽度限制，避免宽度撑满超出父容器 */
.example-margin {
  width: 100%;
  /* 可选：让勾选框和第一行文本顶部对齐，不会出现多行文本时勾选框垂直居中的违和感 */
  align-items: flex-start;
}

方案2：无需额外嵌套div，直接修改mat-checkbox原生样式 #

可以去掉你套的内层div，直接给mat-checkbox加自定义类修改原生标签样式：

1. 调整HTML代码：

<mat-checkbox class="example-margin checkbox-auto-wrap"  matInput name="customerInfo.isok">
  This is very long text tha bla bla bla bla bla bla blablabla blablablablablablablablablablablabla
</mat-checkbox>

2. 添加对应CSS：

.checkbox-auto-wrap {
  width: 100%;
  align-items: flex-start;
}
/* 如果是在组件内写样式，需要加::ng-deep穿透组件样式封装，也可以直接把这段写到全局styles.css里 */
::ng-deep .checkbox-auto-wrap .mat-checkbox-label {
  white-space: normal;
  word-break: break-word;
}

注意事项 #

如果使用::ng-deep，建议在前面加上当前组件的宿主选择器，避免样式污染全局其他mat-checkbox组件，示例：

:host ::ng-deep .checkbox-auto-wrap .mat-checkbox-label {
  white-space: normal;
  word-break: break-word;
}

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