PrimeNG Chips组件溢出行为优化：实现垂直换行而非水平拉伸

我之前也踩过这个坑！PrimeVue的<p-chips>默认确实没有直接提供控制溢出换行的配置项，默认的水平拉伸溢出页面的体验确实不太友好。不过我们可以通过自定义CSS轻松实现类似Material UI的垂直扩展、自动换行效果，具体步骤如下：

1. 给组件添加自定义类名 #

首先给你的<p-chips>组件加上一个自定义类，方便我们精准定位样式：

<p-chips class="wrap-enabled-chips" v-model="selectedItems" />

2. 添加自定义CSS样式 #

通过覆盖组件默认的flex布局属性，让chips容器支持自动换行：

/* 让chips容器支持换行，取消溢出隐藏 */
.wrap-enabled-chips .p-chips-multiple-container {
    flex-wrap: wrap !important;
    overflow: visible !important;
    min-height: 2.5rem; /* 保留初始高度，内容增多时自动扩展 */
}

/* 防止输入框被挤压变形 */
.wrap-enabled-chips .p-chips-input-token {
    flex: none;
}

/* 可选：给换行后的chips添加上下间距，优化视觉体验 */
.wrap-enabled-chips .p-chip {
    margin-bottom: 0.4rem;
}

原理说明： #

PrimeVue的<p-chips>多标签容器默认使用flex-wrap: nowrap的flex布局，所以会一直水平拉伸直到溢出页面。我们通过把flex-wrap改成wrap，同时关闭overflow: hidden，就能让容器自动换行并垂直扩展高度，完全展示所有chips，不用再缩小组件尺寸。

这样修改后，你的<p-chips>组件就会和Material UI的标签组件一样，内容过多时自动换行，组件高度自适应，所有chips都能清晰可见啦！

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