如何在ngx-select中实现长选项文本hover时显示完整内容？

你可以通过自定义选项模板来实现需求，完全基于ngx-select，不需要依赖其他库，步骤如下：

1. 修改HTML模板，添加自定义选项模板 #

在ngx-select标签内部，添加ng-template自定义每个选项的渲染逻辑，同时给文本元素加上title属性实现悬停提示：

<div class="col-lg-6">
  <ngx-select class="form-control-file" noResultsFound="noResultsFound"
    placeholder="Choose" [items]="firstList" optionValueField="id"
    optionTextField="name" formControlName="firstList" [searchCallback]="localeSearch">
    <!-- 自定义选项模板 -->
    <ng-template ngxSelectOption let-item="item">
      <span class="truncated-option" [title]="item.name">{{item.name}}</span>
    </ng-template>
  </ngx-select>
</div>

2. 添加CSS样式（可选但推荐） #

为了让过长文本显示省略号，明确提示用户文本被截断，可在组件CSS文件中添加：

.truncated-option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

原理说明 #

• ng-template ngxSelectOption是ngx-select提供的自定义选项模板标识，let-item="item"会将当前循环的选项数据注入到模板中；
• [title]="item.name"把选项的完整文本绑定到元素的title属性，鼠标悬停时浏览器会自动显示该内容；
• 保留原有的optionValueField、formControlName等属性，不会影响下拉框的选择、表单绑定和搜索功能。

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