0

我想在容器中内联显示列表项，这样列表应该只显示父项可以在一行中容纳的项。如果可用项目的总数超过可见项目，那么最后应该可以看到一个带有剩余项目计数的伪元素

样本

ul {
  background: lightblue;
  width: 50%;
  max-height: 32px;
  padding: 0px 10px;
/*  overflow: hidden;*/
  display: flex;
  flex-wrap: wrap;
}

ul>li {
  display: inline;
  background: yellow;
  padding: 2px 6px;
  margin: 5px 2px;
}
<!DOCTYPE html>
<html>
<body>

<h2>List Teaser Example</h2>
<h3>Expected output</h3>
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Donut</li>
  <li>Pineapple</li>
  <li>& 8 more</li>
</ul>

<h3>Actual output</h3>
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Donut</li>
  <li>Pineapple</li>
  <li>Mango</li>
  <li>Guava</li>
  <li>Peach</li>
  <li>Apricot</li>
  <li>Orange</li>
  <li>Pear</li>
  <li>Watermelon</li>
  <li>Muskmelon</li>
</ul>

</body>
</html>

4

0 回答 0