有没有一种方法可以限制多列ul显示中的行数？

Question

到目前为止，这是我尝试过的：

$('ul').filter(function() {
  return this.childNodes.length > 5
}).addClass('twoColumns');

ul.twoColumns {
  list-style: none;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

这与我从另一个堆栈溢出问题引用的代码相同。这是链接。

但是我试图限制行数并进行了研究，但找不到任何解决方案。

主要寻找CSS解决方案，但也接受JavaScript。

Answer 1

您可以考虑如下 CSS 网格来定义行数：

ul {
  display:grid;
  grid-template-rows:1fr 1fr; /*2 equal rows*/
  grid-auto-flow:column;
  list-style:none;
}

li {
  padding:5px 10px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>