如何实现select下拉选项文本过长时隐藏溢出显示省略号

样式不生效的核心原因有两个：

• text-overflow: ellipsis 生效必须同时满足三个前提：元素设置明确宽度/最大宽度、overflow: hidden、white-space: nowrap。你之前的代码错把overflow: hidden的属性名写成了text-overflow: hidden，也没配套加不换行、宽度限制属性，自然达不到效果。
• 原生<select>属于浏览器系统级渲染控件，部分旧版本浏览器不支持通过CSS完全控制内部下拉选项的样式，仅靠样式无法100%覆盖所有浏览器的下拉展开层表现，但可以保证选中态不撑破布局。

不需要修改你现有的jQuery提交逻辑，直接加对应CSS即可，适配Chrome、Edge、Firefox 88+、Safari 14+等绝大多数现代浏览器：

1. 移除你之前写在select标签上的无效内联样式style="text-overflow:ellipsis;"
2. 因为代码用了Bootstrap的表单类，建议用ID选择器单独给这个下拉框加样式，避免影响页面其他表单元素，新增CSS如下：

#addWatcherSelect {
  /* 按你的布局需求调整最大宽度，从根源避免下拉框被长内容撑开 */
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#addWatcherSelect option {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 6px 8px;
}

3. （可选优化）如果需要让用户查看被截断的完整文本，渲染option时给每个选项加title属性，值为选项的完整文本即可，鼠标悬停时会自动显示完整内容，不需要额外写交互逻辑。

如果需要兼容更老版本的浏览器，可能会出现下拉展开时选项临时显示全量文本的情况，这是原生控件的固有特性：下拉层是临时弹出的浮层，不会挤压页面其他元素的固定布局，收起下拉框后就会恢复截断状态，完全不影响页面正常排版。如果要求所有场景下展开的选项也必须截断，就需要替换成自定义实现的下拉组件，但一般业务场景下上述CSS方案改造成本最低，不需要改动现有业务逻辑。

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