jQuery Nice Select 不使用溢出隐藏

Posted 2023-05-09

【中文标题】jQuery Nice Select 不使用溢出隐藏

【英文标题】：jQuery Nice Select not working with overflow hidden

【发布时间】：2020-03-01 05:16:13

【问题描述】：

我正在使用hernansartorio/jquery-nice-select 插件并试图让它截断长命名的选项字符串。

当溢出设置为隐藏时选择无法正常工作 - 单击时不显示下拉菜单。 （它出现但未显示，您仍然可以通过向上/向下箭头选择选项） 我只想用省略号很好地隐藏太长的字符串。有没有办法做到这一点？ 提前谢谢你。

这是example on codepen。

<select class="bug-overflow">
  <option value="First one">Bug First lorem lorem lorem lorem lorem one</option>
  <option value="Second One">Bug Second lorem lorem lorem lorem lorem one</option>
</select>

/* bug style */
.bug-overflow 
  width: 150px;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden; /*bug here*/
  white-space: nowrap;


$(document).ready(function() 
  $('select').niceSelect();
);

在 mac os 10.13.6（chrome、opera、safari）、windows 10（chrome、opera、ff）、android（chrome、samsung internet）上检查

【参考方案1】：

找到了解决办法。 我向那些设法花时间阅读我的问题的人道歉。但是我已经找到了解决它的方法。 （我只是不注意将样式应用于错误的元素）

/*found solution*/
/*override .current for my purposes*/
.custom-style .current 
  width: 110px;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;


<select class="custom-style">
  <option value="First one">Bug First lorem lorem lorem lorem lorem one</option>
  <option value="Second One">Bug Second lorem lorem lorem lorem lorem one</option>
</select>