html - 在溢出之前包装不同长度的元素 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 个部分并独立呈现它们之外，还有其他解决方案吗？

标签： htmlcssreactjsflexboxcss-grid

Answer 1

仅通过 CSS，您可以尝试 write-mode 和 column 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>