处理省略号

拉朱(Raju Putchala)

我是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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章