Angular+PrimeNG p-listbox组件列表项超出问题咨询

我来帮你搞定这个列表项内容超出容器的问题～从你给出的代码来看，主要是因为使用了Bootstrap栅格类但没有配合合适的布局控制，加上Listbox设置了固定宽度（190px），导致内容溢出。这里有几个实用的解决方案：

方案1：改用Flex布局替代栅格类（推荐） #

Bootstrap的col类会自带padding和宽度计算，容易超出Listbox的固定宽度。换成flex布局可以更灵活地分配空间，同时处理文本溢出：

<p-listbox id="booking-users-list" [options]="items" [style]="{'width':'190px'}" [listStyle]="{'max-height':'238px'}">
  <ng-template let-participant let-i="index" pTemplate="item">
    <!-- 用flex布局分配元素空间 -->
    <div class="task padd-users-list" style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
      <!-- 文本容器设置溢出处理，过长时显示省略号 -->
      <span style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{participant}}</span>
      <button class="btn-x btn-add-user" type="button" (click)="你的点击事件">X</button>
    </div>
  </ng-template>
</p-listbox>

方案2：修复Bootstrap栅格的布局问题 #

如果你一定要保留栅格类，需要给栅格添加容器并调整内外边距，确保整体宽度不超过Listbox：

<p-listbox id="booking-users-list" [options]="items" [style]="{'width':'190px'}" [listStyle]="{'max-height':'238px'}">
  <ng-template let-participant let-i="index" pTemplate="item">
    <!-- 添加row容器并清除默认margin -->
    <div class="row" style="margin: 0; width: 100%;">
      <!-- 清除col的默认padding，同时设置文本溢出 -->
      <div class="col-xs-10 col-sm-10 task padd-users-list" style="padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
        <span>{{participant}}</span>
      </div>
      <div class="col-xs-2 col-sm-2" style="padding: 0;">
        <button class="btn-x btn-add-user" type="button" (click)="你的点击事件">X</button>
      </div>
    </div>
  </ng-template>
</p-listbox>

方案3：全局CSS统一处理 #

如果项目里有多个类似的Listbox，可以用全局CSS来统一设置样式，避免重复写内联样式：

/* 给Listbox的项设置flex布局 */
.p-listbox .p-listbox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem; /* 可根据需求调整内边距 */
}

/* 处理文本溢出 */
.p-listbox .p-listbox-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 0.5rem; /* 给按钮留出空间 */
}

这些方法的核心都是控制元素的宽度分配和处理文本溢出，确保内容在Listbox的固定宽度内正常显示，不会超出容器。

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