我是CSS的新手,我将动作列表显示为动作栏上的链接。每当增加动作列表时,我都需要显示...作为按钮的后缀,我可以使用以下代码段进行操作
<div class="actions-menu" style="width:200px; height: 30px;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
这给了我action1 action2 action3 ...现在,当我单击时...我需要在这里显示一个下拉菜单中的其余操作,我在努力,如何处理这些问题...,如何单击,这是我的问题,请在这里帮助我。
tabindex + focus可以帮助...直到失去焦点
ul, li {
text-overflow:ellipsis;
overflow:hidden;
width:200px;
white-space:nowrap;
height:1.2em;
padding:0;
position:relative;
}
ul li {
display:inline-block;
background:turquoise
}
ul li:nth-child(odd) {
background:tomato;
}
/*reset ellipsis rules */
ul:focus {
overflow:visible;
}
ul:focus li {
display:block;
overflow:visible;
white-space:normal;
height:auto;
}
ul li:hover {
background:lime;
}
<p>test</p>
<ul tabindex="0">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. test</p>
切换CSS示例...仍应使用javascript
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句