前端之家

  1. 首页
  2. 问答

jQuery Nice Select无法与隐藏的溢出一起使用

• 问答

我正在使用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，三星Internet）上进行了检查

daibin0715 回答：jQuery Nice Select无法与隐藏的溢出一起使用

找到了解决方案。 我向那些花时间阅读我的问题的人表示歉意。但是我已经找到了解决方法。 （我只是不专心地将样式应用于错误的元素）

/*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>
csshtmljqueryjquery-plugins
本文链接：https://www.f2er.com/3163730.html

大家都在问