jQuery 不错 Select 无法使用隐藏的溢出
jQuery Nice Select not working with overflow hidden
我正在使用 hernansartorio/jquery-nice-select 插件并试图让它截断长命名选项字符串。
当溢出设置为隐藏时,Select 无法正常工作 - 当点击的下拉菜单未出现时。 (出现但未显示,您仍然可以通过 up/down 箭头选择 ose 选项)
我只想用省略号很好地隐藏太长的字符串。有什么办法吗?
提前谢谢你。
这是一个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,歌剧,safari),windows 10(chrome,歌剧,ff), android(chrome,三星互联网)
找到解决办法。
我向那些设法花时间阅读我的问题的人道歉。但是我已经找到了解决它的方法。 (我只是不注意将样式应用于错误的元素)
/*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>
我正在使用 hernansartorio/jquery-nice-select 插件并试图让它截断长命名选项字符串。
当溢出设置为隐藏时,Select 无法正常工作 - 当点击的下拉菜单未出现时。 (出现但未显示,您仍然可以通过 up/down 箭头选择 ose 选项) 我只想用省略号很好地隐藏太长的字符串。有什么办法吗? 提前谢谢你。
这是一个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,歌剧,safari),windows 10(chrome,歌剧,ff), android(chrome,三星互联网)
找到解决办法。 我向那些设法花时间阅读我的问题的人道歉。但是我已经找到了解决它的方法。 (我只是不注意将样式应用于错误的元素)
/*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>