Angular ng-multiselect-dropdown选中含空格值自动换行问题解决

• 在Angular项目中使用ng-multiselect-dropdown组件，基础实现代码如下：

// .ts 文件代码
this.employee_list = [
  { Id: 1, Value: 'Europe' },
  { Id: 2, Value: 'Employee Name' },
  { Id: 3, Value: 'Employee Address' },
  { Id: 4, Value: 'Employee LastName' }
];

this.dropdownSettings = {
  idField: 'Id',
  textField: 'Value',
  itemsShowLimit: 3
};

<!-- html 文件代码 -->
<div class="col-md-4">
  <label for="employee">Choose a Employee details</label>
  <ng-multiselect-dropdown
    [settings]="dropdownSettings"
    [data]="employee_list">
  </ng-multiselect-dropdown>
</div>

• 异常表现：选中带空格的长文本选项时，即使容器存在剩余可用空间，选中值仍会折为多行显示。
• 预期效果：选中值单行展示，溢出内容显示为省略号（...），鼠标悬浮时展示完整选中值内容。
  

该问题由组件默认选中项样式未做文本溢出截断导致，直接通过自定义样式覆盖即可实现需求，注意样式需要写到全局样式文件（styles.css/styles.scss）中，组件局部样式受隔离规则限制无法生效。

1. 核心截断样式

/* 选中项父容器禁止换行 */
ng-multiselect-dropdown .multiselect-dropdown .dropdown-btn {
  flex-wrap: nowrap;
  overflow: hidden;
}
ng-multiselect-dropdown .multiselect-dropdown .selected-item-container {
  overflow: hidden;
}

/* 单个选中项文本单行省略 */
ng-multiselect-dropdown .multiselect-dropdown .selected-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%; /* 可根据实际容器宽度调整，预留关闭按钮的显示空间 */
  display: inline-block;
}

2. 悬浮显示完整内容
   两种实现方案二选一即可：

• 方案1：原生title属性实现（推荐，不影响布局）
  通过组件提供的选中项模板，给文本绑定title属性，鼠标悬浮时会自动显示系统原生提示：

<ng-multiselect-dropdown
  [settings]="dropdownSettings"
  [data]="employee_list">
  <!-- 自定义选中项模板 -->
  <ng-template ng-multiselect-selected-item-template let-item="item">
    <span [title]="item.Value">{{item.Value}}</span>
  </ng-template>
</ng-multiselect-dropdown>

• 方案2：纯CSS悬浮展示
  不需要修改模板代码，直接追加全局样式即可，缺点是悬浮时文本展示可能影响周边布局：

ng-multiselect-dropdown .multiselect-dropdown .selected-item:hover {
  overflow: visible;
  position: relative;
  z-index: 999;
  background: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

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