PrimeNG 芯片溢出行为

Question

当我有太多“筹码”无法放入 <p-chips> 时组件时，它开始水平拉伸(stretch)组件，直到它离开页面边缘​​。我希望它垂直扩展，并换行到下一行(就像 Material UI 所做的那样)。

似乎没有任何选项可以控制溢出行为，如果我将组件设计得更小，我就看不到溢出的芯片:(

Answer 1

芯片标记使用 flex 定位，因此一些自定义样式可以达到目的。遗憾的是这不是默认行为。

.p-chips-multiple-container {
  flex-wrap: wrap;
  align-content: space-between;
  padding-bottom: 0;
}

.p-chips-token, .p-chips-input-token {
  margin-bottom: 0.5rem;
}

从您安装的任何主题中获取边距值。