Angular Material带复选框选择列表文本截断省略号不生效问题

问题描述 #

• 受UI空间限制，带复选框的Angular Material选择列表需实现文本截断显示，禁止自动换行
• 参照官方示例复现后，文本可实现截断，但行尾无法显示预期的省略号
• 已配置text-overflow: ellipsis、white-space: nowrapCSS属性
• 预期效果：每行列表文本在复选框旁的行尾以...省略号结尾

解决方案 #

省略号不生效由两个默认布局规则导致：

• 文本截断规则不完整：仅配置了不换行、省略号属性，缺少overflow: hidden
• Flex布局默认规则限制：Material列表选项默认采用flex布局，flex子项默认min-width: auto，会被内部内容撑开宽度，导致溢出截断逻辑无法触发

按以下代码覆盖组件样式即可修复：

/* 固定选项宽度，撑满父容器 */
.mat-mdc-list-option {
  width: 100%;
}
/* 配置选项内容容器flex约束，min-width: 0为覆盖默认规则的关键配置 */
.mat-mdc-list-item-unscoped-content {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
/* 前置复选框设置不收缩，避免被长文本挤压变形 */
.mdc-list-item__start {
  flex-shrink: 0;
}
/* 文本元素补全截断三属性 */
.list-option-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

版本适配：若使用Angular Material 15以下版本，将上述类名中mat-mdc-前缀替换为mat-、mdc-前缀替换为mat-即可生效。

配置完成后，长文本会在到达内容区域宽度边界时自动截断，行尾正常显示省略号，无自动换行、截断无省略号问题。

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