如何摆脱角材料芯片上100％的水平宽度？答案

【问题标题】：How to get rid of horizontal width of 100% on angular material chips?如何摆脱角材料芯片上100％的水平宽度？
【发布时间】：2020-04-30 11:40:53
【问题描述】：

我正在做一个 Angular 材质项目，但遇到了一个问题。我正在尝试使用垂直堆叠的芯片，但是当我使用预定义的代码时，芯片的宽度是 100%。有没有办法在 mat-chip-list-stacked 类中取消设置宽度值？我不希望芯片是全水平宽度。

<mat-chip-list class="mat-chip-list-stacked" aria-orientation="vertical">
  <mat-chip>Papadum</mat-chip>
  <mat-chip>Naan</mat-chip>
  <mat-chip>Dal</mat-chip>
</mat-chip-list>

这就是代码的样子：

这就是我希望代码的样子：

【问题讨论】：

你想要多少宽度？比如 10% 20% 等等...
@GangadharGandi - 我更新了消息内容以显示我正在寻找动态宽度。
用新样式更新了答案。请检查。

标签： css angular angular-material

【解决方案1】：

如果您使用的是 Angular 9，则可以覆盖 mat-chip 组件样式。您可以将 max-width 设置为一定长度，

mat-chip {
  max-width: 50px;
}

或者，使用!important 声明覆盖宽度：

mat-chip {
  width: 50px!important;
}

如果您使用的是 Angular 9 之前的任何东西，则必须通过选择正确的 CSS 类来对属性进行分类。

.mat-chip-list .mat-chip {
  width: 50px;
}

【讨论】：

我更新了消息内容以显示我正在寻找动态宽度。
@user3767997 宽度是如何设置的？你会提供宽度的长度吗
不，它们是由材料预定义的 class="mat-chip-list-stacked" 自动设置的。

【解决方案2】：

要取消设置宽度，我们可以使用下面的 css。

.mat-chip-list .mat-chip {
  width: auto;
  min-width: 0;
}

【讨论】：

【解决方案3】：

这是最好的解决方案：

mat-chip {
  max-width: max-content;
  max-width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  max-width: -moz-max-content;
}

【讨论】：