li 设置了 overflow-x: scroll;white-space: nowrap;如何设置N个后自动换行，而不是一行全部

如果要在满足一定数量后自动换行，可以使用 CSS 的 flex 布局来实现。具体方法如下：

1. 首先，给 ul 元素设置 display: flex; 和 flex-wrap: wrap;，使其可以自动换行；
2. 然后，给 li 元素设置 flex-basis: calc(25% - 10px); 和 margin: 5px;，使其在一行中占据 25% 的宽度，并且之间有 5px 的间隔；
3. 最后，可以根据需要给 ul 元素和 li 元素设置其他样式，如宽度、高度、字体大小等。

这样就可以实现 li 元素在满足一定数量后自动换行的效果了。具体代码示例如下：

<style>
  ul {
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    overflow-x: scroll;
  }
  li {
    flex-basis: calc(25% - 10px);
    margin: 5px;
    white-space: normal;
    /* 其他样式 */
  }
</style>

<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>
  <li>内容9</li>
  <li>内容10</li>
  <li>内容11</li>
  <li>内容12</li>
</ul>

在这个示例中，li 元素会在 ul 元素的宽度内自动换行，并且在每行中自动排列成四列。同时，ul 元素设置了 overflow-x: scroll;，可以出现滚动条，而每个 li 元素的 white-space: normal; 属性可以保持内容的换行。