如何阻止Ng Select多选输入框增高，显示省略号替代选中标签

当Ng Select开启multiple="true"后，默认会随选中标签增多自动增高输入框，要实现固定高度、隐藏多余标签并在末尾显示省略号，直接通过CSS自定义样式就能搞定，具体步骤如下：

1. 核心样式覆盖 #

针对Ng Select的内部组件，修改默认布局行为：

• 固定容器高度，避免内容撑开：

/* 固定多选容器高度，按需调整数值 */
.ng-select.ng-select-multiple .ng-select-container {
  height: 42px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

• 强制标签横向排列不换行，超出部分隐藏：

/* 让选中标签容器不换行，超出隐藏 */
.ng-select.ng-select-multiple .ng-value-container {
  flex-wrap: nowrap;
  overflow: hidden;
  width: calc(100% - 70px); /* 给输入框和省略号留空间 */
  position: relative;
}

• 添加末尾省略号效果：

/* 在标签容器末尾添加省略号，覆盖后面的标签 */
.ng-select.ng-select-multiple .ng-value-container:after {
  content: '...';
  position: absolute;
  right: 0;
  background-color: #ffffff; /* 用背景色挡住后面的标签 */
  padding-left: 8px;
  color: #666;
}

• 调整输入框位置，防止被省略号遮挡：

/* 固定输入框到右侧，避免被省略号覆盖 */
.ng-select.ng-select-multiple .ng-input {
  position: absolute;
  right: 12px;
  width: 60px;
  background-color: #ffffff;
}

2. 可选优化：悬停显示全量标签 #

如果需要让用户查看所有选中项，可给Ng Select加个tooltip，鼠标悬停时显示完整选中列表：

<ng-select 
  multiple="true"
  [items]="yourItemList"
  [(ngModel)]="selectedItems"
  title="{{ selectedItems.map(item => item.label).join(', ') }}"
></ng-select>

根据自己项目的UI风格，调整高度、间距、颜色等参数即可适配。

内容的提问来源于stack exchange，提问作者Saheel Sapovadia