在溢出之前将不同长度的元素包装 X 次

Question

我正在尝试显示一个不同长度的标签的简单列表，这些标签在水平溢出之前会跨越 3 行，同时可以使用 React 进行滚动。

标签包含文本、边框，仅此而已：

这是一张精美的图画，说明了我尝试使用不同数量的标签渲染的内容：

这是我当前正在使用的代码，其中标签在垂直方向上溢出：

:root {
    --scpu-bg: #1b1b1b;
    --scpu-border: #3d3d3d;

    --scpu-fg: #ffffff;

    color: var(--scpu-fg);

    font-size: 14px;
}

body {
    background-color: var(--scpu-bg);
}

.tag-chip {
    padding: 1rem;
    border: 1px var(--scpu-border) solid;
}

.tag-cloud {
    overflow-x: scroll;
 }
 
    .tag-list {
        /*display: grid;

        grid: 1fr 1fr 1fr / ;*/

        max-height: 11rem;
        display: flex;
        gap: 0.7rem;
        flex-wrap: wrap;
    }

<div class="tag-cloud">
  <div class="tag-list nav-scroll">
    <span class="tag-chip">6000</span><span class="tag-chip">alagadda</span
    ><span class="tag-chip">artifact</span><span class="tag-chip">audio</span
    ><span class="tag-chip">biological</span
    ><span class="tag-chip">blackwood</span><span class="tag-chip">_cc</span
    ><span class="tag-chip">co-authored</span
    ><span class="tag-chip">container</span><span class="tag-chip">d-11424</span
    ><span class="tag-chip">daevite</span
    ><span class="tag-chip">deer-college</span
    ><span class="tag-chip">doctor-light</span
    ><span class="tag-chip">doctor-mcdoctorate</span
    ><span class="tag-chip">entropic</span
    ><span class="tag-chip">esoteric-class</span
    ><span class="tag-chip">ethics-committee</span
    ><span class="tag-chip">faeowynn-wilson</span
    ><span class="tag-chip">global-occult-coalition</span
    ><span class="tag-chip">grand-karcist-ion</span
    ><span class="tag-chip">hanged-king</span
    ><span class="tag-chip">hy-brasil</span
    ><span class="tag-chip">interactive</span
    ><span class="tag-chip">la-rue-macabre</span
    ><span class="tag-chip">_licensebox</span><span class="tag-chip">meta</span
    ><span class="tag-chip">metallic</span
    ><span class="tag-chip">narrative</span
    ><span class="tag-chip">on-guard-43</span
    ><span class="tag-chip">portal</span><span class="tag-chip">religious</span
    ><span class="tag-chip">ritual</span
    ><span class="tag-chip">s&amp;amp;c-plastics</span
    ><span class="tag-chip">scp</span><span class="tag-chip">serpents-hand</span
    ><span class="tag-chip">spacetime</span
    ><span class="tag-chip">temporal</span
    ><span class="tag-chip">three-moons-initiative</span
    ><span class="tag-chip">three-portlands</span
    ><span class="tag-chip">wanderers-library</span
    ><span class="tag-chip">weapon</span
    ><span class="tag-chip">wilsons-wildlife</span>
  </div>
</div>

我目前正在使用display: flex“耦合”flex-wrap: wrap来尽可能接近我想要做的事情。

简而言之，我希望标签最多放置 3 行，无论需要多宽，同时让标签保持自己的宽度。

不幸的是，我只知道组件应该具有的高度，并且环绕效果不适用于溢出 AFAIK。

如果您已经知道组件的高度，但不知道宽度，为什么不使用 呢flex-direction: column？

因为这样每个元素都被赋予相同的宽度，从而形成一个尴尬的组合：

如果您有一定数量的行，为什么不使用display: grid？

列不会遇到与上面相同的问题吗？

除了将我的标签数组分成 3 个部分并独立渲染它们之外，还有其他解决方案吗？

Answer 1

仅通过CSS，您可以尝试编写模式和列CSS，最后通过min-content/max-content和max-height:100%重置大小；

请注意，一旦 Masonry Layout将被广泛实现（在该答案时仅 FF），此答案将过时，而此答案正是您要寻找的答案。

警告：此功能仅在 Firefox 中实现，可以通过将标志设置layout.css.grid-template-masonry-value.enabled为truein来启用about:config，以便允许测试和提供反馈。

这是实际的想法（欢迎提供有关浏览器故障的反馈）

:root {
  --scpu-bg: #1b1b1b;
  --scpu-border: #3d3d3d;
  --scpu-fg: #ffffff;
  color: var(--scpu-fg);
  font-size: 14px;
}

body {
  background-color: var(--scpu-bg);
}

.tag-chip {
  padding: 1rem;
  border: 1px var(--scpu-border) solid;
}

.tag-cloud {
  overflow-x: scroll;
  max-height: 11rem;
  padding-bottom: 1.2rem;
  display: flex;
}

.tag-list {
  column-count: 3;
  column-rule-width:0;
  writing-mode: vertical-lr;
  width: max-content;
  height: min-content;
  max-height: 100%;
  padding-right:2px;
}

.tag-chip {
  writing-mode: horizontal-tb;
  margin: 2px;
}

<div class="tag-cloud">
  <div class="tag-list nav-scroll">
    <span class="tag-chip">6000</span><span class="tag-chip">alagadda</span
    ><span class="tag-chip">artifact</span><span class="tag-chip">audio</span
    ><span class="tag-chip">biological</span
    ><span class="tag-chip">blackwood</span><span class="tag-chip">_cc</span
    ><span class="tag-chip">co-authored</span
    ><span class="tag-chip">container</span><span class="tag-chip">d-11424</span
    ><span class="tag-chip">daevite</span
    ><span class="tag-chip">deer-college</span
    ><span class="tag-chip">doctor-light</span
    ><span class="tag-chip">doctor-mcdoctorate</span
    ><span class="tag-chip">entropic</span
    ><span class="tag-chip">esoteric-class</span
    ><span class="tag-chip">ethics-committee</span
    ><span class="tag-chip">faeowynn-wilson</span
    ><span class="tag-chip">global-occult-coalition</span
    ><span class="tag-chip">grand-karcist-ion</span
    ><span class="tag-chip">hanged-king</span
    ><span class="tag-chip">hy-brasil</span
    ><span class="tag-chip">interactive</span
    ><span class="tag-chip">la-rue-macabre</span
    ><span class="tag-chip">_licensebox</span><span class="tag-chip">meta</span
    ><span class="tag-chip">metallic</span
    ><span class="tag-chip">narrative</span
    ><span class="tag-chip">on-guard-43</span
    ><span class="tag-chip">portal</span><span class="tag-chip">religious</span
    ><span class="tag-chip">ritual</span
    ><span class="tag-chip">s&amp;amp;c-plastics</span
    ><span class="tag-chip">scp</span><span class="tag-chip">serpents-hand</span
    ><span class="tag-chip">spacetime</span
    ><span class="tag-chip">temporal</span
    ><span class="tag-chip">three-moons-initiative</span
    ><span class="tag-chip">three-portlands</span
    ><span class="tag-chip">wanderers-library</span
    ><span class="tag-chip">weapon</span
    ><span class="tag-chip">wilsons-wildlife</span>
  </div>
</div>