并排调整列表项而不滚动

Question

我有一个在单列中动态填充的列表项。但是，如果列表项目跨越一定高度，我希望将其并排显示，如下所示：

1. a
2. b
3. c
4. d
5. e
6. f
7. g
8. h

到===>

1. a 5。e
2. b6。f
3. c 7。g
4. d 8。h

Answer 1

我想这就是你想要的：

<ol>
<li>Lorem.</li>
<li>Iure.</li>
<li>Eos.</li>
<li>Dolore?</li>
<li>Voluptatibus!</li>
<li>Voluptates.</li>
<li>Mollitia.</li>
<li>Veniam?</li>
</ol>

ol {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 10ch;
width: 200px;
}