Question

我是css的新手，我将动作列表显示为操作栏上的链接。每当动作列表增加时，我需要显示...作为按钮的后缀，我可以使用以下代码片段来完成此操作

<div class="actions-menu" style="width:200px; height: 30px;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">

这是给我action1 action2 action3 ... 现在，当我点击...我需要在下拉列表中显示剩下的动作我在努力，如何处理这些...，如何点击这是我的问题，请在这里帮助我。

Answer 1

tabindex + focus can help ... untill focus is lost

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>

a toggle css example ... still javascript should be used

Answer 2

单独使用CSS时，您尝试做的事情是不可能实现的。您可能想要做的就是连接一些JavaScript，以便在点击该元素时切换该元素的类。

<script>
  // jQuery
  $('.actions-menu').click(function() {
    $(this).toggleClass('open');
  });
</script>
<style>
  .actions-menu.open {overflow: visible !important;}
</style>

如果你只使用CSS，那么添加它可能是最好的，但只有在鼠标按钮关闭时才能正常工作。

<style>
.actions-menu:active {overflow: visible !important;}
</style>

处理省略号的点

2 个答案: