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

Posted 2023-02-22

【中文标题】在溢出之前包装不同长度的元素 X 次

【英文标题】：Wrapping elements of varying length X times before overflowing

【发布时间】：2021-11-10 14:41:42

【问题描述】：

我正在尝试显示一个不同长度的标签的简单列表，这些标签将跨越 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 个部分并独立呈现它们之外，还有其他解决方案吗？

【问题讨论】：

所以您希望最多 3 行标签，并且隐藏其他所有内容？对吗？

没错，其余的会在滚动时向右溢出@AbinThaha

是的，标签是动态加载的，在渲染之前它们的数量是未知的@lupz

虽然在撰写本文时对它的支持为零（实验性除外），但网格砌体布局可能只允许这种确切的行为。也就是说，如果最终实现能够处理以下 CSS 组合：min-width: 100%; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: masonry;。但是，就目前而言，这不会像您想要的那样工作，因为当grid-template-columns 设置为masonry 时，grid-auto-flow 被隐式设置为column。我在 FireFox 中尝试过，在声明砌体布局后无法覆盖流向????

@GustvandeWal 如果您有代码示例/提案 TC 链接以及该关键字的 beta 浏览器覆盖预览，我会很乐意为您选择答案

【参考方案1】：

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

---

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

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

---

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

: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>

【讨论】：

几乎完美！现在只需添加一些 JS 来检查使用 2 或 1 列的有效性，这正是 OP 所要求的，具有运行良好的 no-js 实现。请注意，顺便说一下，列中的边距可能有点不稳定。列表右侧没有空格。

感谢您的反馈，我可能会为此在标签列表的右侧添加一个填充。还添加了对 column-rule-width 的重置 :)

这是一个绝妙的方法。感谢分享@G-Cyrillus。

【参考方案2】：

尽管缺乏支持，masonry 网格是您正在寻找的。它与columns 布局极为相似，但较少关注“纯文本”。 columns 是当你想要一个类似报纸的布局时你会选择的，这是你所要求的，但是是水平的。根据我的经验，它有一些非常奇怪的怪癖，例如不正常行为的边距，以及框阴影和轮廓被切断并移至下一列的视觉故障。 G-Cyrillus' 答案精美地展示了如何使用它。我需要改变的只是列表内的间距。 columns 完全支持，所以我添加了他的实现作为不支持 masonry 时的后备（它仍在开发中，从外观上看，实际登陆浏览器需要一些时间。我不过，人们已经等不及这张纸条已经过时了）。

现在来回答。到目前为止，如果您在 Firefox 中启用该功能，您实际上可以看到masonry 网格在this Fiddle 中工作。这是重要的 CSS：

  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: masonry;

就像在 Fiddle 中提到的那样，有一个属性会 使它完全纯 CSS — grid-auto-flow: row;，但这不起作用（我希望现在），因为流向当您将grid-template-columns 设置为masonry 时，网格的值被隐式设置为column。无法还原。

为了从 flex 切换到 masonry，脚本循环遍历子元素以检测 flexbox 中存在的行数。它通过检查它们从顶部的偏移量来做到这一点。如果该值第 4 次切换，则会将相应的 grid 类添加到列表中。

来自您的评论：

至于溢出，如果每个溢出的元素都添加到最短的行，那就太好了，尽管这似乎是不可能的，因为它与以前的行为不同。

masonry 实际上会自动执行此操作！

【讨论】：

感谢您的回答，一旦被主流浏览器支持，这似乎是解决此问题的正确方法。

不幸的是，在最后几个小时里，现实生活中的事件让我陷入了困境，我不得不提供最终自动归因的赏金

这根本不是问题。 G-Cyrillus 的答案是当前的最佳选择，无论如何我将其复制到我的答案中。不过，你总是可以通过接受这个答案来弥补?

【参考方案3】：

let tag = document.querySelector(".tag-chip");
let font = parseInt(getComputedStyle(tag).getPropertyValue("font-size"));
let gap = parseInt(getComputedStyle(tag).getPropertyValue("margin-right"));

const blocks = document.querySelectorAll(".tag-chip");
widths = [];
blocks.forEach((block) => 
  let width = block.getBoundingClientRect().width;
  widths.push(width + gap);
);
const sum = widths.reduce(function(a, b) 
  return a + b;
, 0);

finalWidth = Math.ceil(sum / (3 * font) + 5); //change 3 by row required.

let tagList = document.querySelector(".tag-list");
let setWidth = tagList.style.setProperty("--finalWidth", `$finalWidthrem`);

:root 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  --scpu-bg: #1b1b1b;
  --scpu-border: #3d3d3d;
  --scpu-fg: #ffffff;
  --font-400: 16px;
  /*decides 1 rem*/
  --finalWidth: 10rem;
  /*changed by JS*/
  color: var(--scpu-fg);
  font-size: var(--font-400);


body 
  background-color: var(--scpu-bg);
  overflow: hidden;


.tag-chip 
  display: inline-block;
  padding: 0.4em 1em;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
  border: 1px var(--scpu-border) solid;


.tag-cloud 
  width: 95vw;
  overflow-x: auto;
  border: 1px solid black;
  white-space: nowrap;
  padding: 0.5em;


.tag-list 
  display: flex;
  flex-wrap: wrap;
  width: var(--finalWidth);

<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">specialist</span>
    <span class="tag-chip">wilsons-wildlife</span>
  </div>
</div>

包含 JS 编辑。

【讨论】：

在这支笔https://codepen.io/sherloke/pen/jOwZJqr?editors=1111中使用JS实现。这是一个动态的、响应迅速的解决方案。

感谢您的 codepen。只是让您知道，对于您未来的答案，您可以在帖子中包含工作代码 sn-ps，就像其他答案一样

谢谢，以sn-p格式实现。

【参考方案4】：

我想知道使用纯静态 CSS“多列布局”（通常只是 column-width）是否可以帮助解决此任务并获得非常接近目标的结果，有两个警告。

任务回顾：

顺序很重要：标签的第一个“页面”应在下一个超出视口的“页面”之前填充并可见。 标签应水平填充，在“页面”行尾换行。 在“页面”填充给定行数后，下一个“页面”从左上角开始填充。

（警告 1！）

“Rigged”非对齐标签右边缘或（丑陋）来自“对齐”文本块的不均匀间距都不是问题。 当标签适合单行时，不会保留未使用的空白垂直空间。 （不符合 OP 的要求。）

令我惊讶的是，这一切都是可能的，而且我在此过程中了解到，这正是列的用途：最大的惊喜是列宽舍入。

警告 2 我发现在某些情况下，Blink 会错误地尝试垂直平衡倒数第二列和最后一列，并从前者“借用”最后一行并将其移动到后者，尽管被告知使用column-fill: auto;“按顺序填充列”。在 Firefox 中，不会发生这种令人惊讶的跳跃。我认为这是一个错误，但尚未进一步调查。

互动演示：

let t, max = 123, c = 0;

onload = () => 
  for (let i = 8; i-- > 0;) addTag();
  t = setInterval(addTag, 500)


function addTag() 
  tags.insertAdjacenthtml(
   'beforeend',
   ` <span>$word()</span>`
  );
  function word() 
    const dict = ['foo', 'fi', 'fa', 'bar',
    'gazonk', 'qux', 'quux'];
    const l = dict.length;
    return dict[Math.floor(Math.random() * l)]
    + '-' + dict[Math.floor(Math.random() * l)];
  ;
  c++;
  if (c >= max) clearInterval(t)

div 
  column-width: 100vw;
  /* This will be rounded to (fraction of) 
     actual container width, so that whole number
     of columns could be viewed together. That is
     exactly what we need in this particular case
     (and probably in general). */
  column-gap: 0; /* Not default apparently. */ 
  column-rule: none; /* Change to see separators. */
  column-count: auto;  /* Default. */
  column-fill: auto;
  /* Not default 
     - this should ensure next column will be
     start filling only after previous is fully
     vertically occupied. 
     Blink does not respect this sometimes: last
     line of second-to-last column occasionaly
     jumps to last columns and back. */
  max-height: 8em; /* No calc for simplicity */
  overflow-x: scroll;
  overflow-y: hidden;
  text-align: justify;
  /* Personally, I'd rather leave it left-aligned. */
  word-spacing: .5em; /* Larger gaps between tags. */
  counter-reset: tags;
  outline: 1px solid;

span 
  display: inline-block;
  outline: 1px solid;
  padding: .2em;
  margin: .3em;
  white-space: nowrap;
  word-spacing: 0; /* Undo gaps. */

span::before 
  counter-increment: tags;
  content: counter(tags) ' '

.narrow-columns 
  column-width: 40vw;
  /* Again, will be rounded - to half. */

.rigged 
  text-align: left;
  word-spacing: 0;
  /* IMHO better. */

<!--
 Demo controls:
-->
<p>
  <button onclick="clearInterval(t);addTag()">Add Tag</button>
  <button onclick="tags.scrollBy(left:tags.getBoundingClientRect().width,behavior:'smooth')">Scroll by width →</button>
  <button onclick="tags.scrollBy(left:-tags.getBoundingClientRect().width,behavior:'smooth')">… ←</button>
|
  <button onclick="clearInterval(t);tags.innerHTML=''">Clear Tags</button>
  <label><input type="checkbox" onchange="tags.classList.toggle('narrow-columns')">Narrower Columns</label>
  <label><input type="checkbox" onchange="tags.classList.toggle('rigged')">Rigged</label>
</p>
<div id="tags">
 <!--
  Bunch of 
   <span>foo-bar</span>
  for demonstrative purposes added by JS here.
 -->
</div>

【参考方案5】：

老实说，如果您正在寻找唯一的纯 CSS 解决方案，我认为这将是您能做的最好的事情。所有标签都保持自己的宽度，但它们之间有间距以使其保持在弹性流动方向。我认为align-items: center; 看起来比align-items: start; 更好，但两者都可以。

: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: none;
     overflow-y: none;

 .tag-list 
     max-height: 15rem;
     display: flex;
     gap: 0.7rem;
     flex-wrap: wrap;
     overflow-x: scroll;
     overflow-y: hidden;
     flex-direction: column;
     align-items: center;

<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>

【参考方案6】：

基于Deckerz's answer，我认为这更接近你想要的。我使用了网格而不是 flexbox，但请注意，只需向 tag-chip 添加一些额外样式并将 align-items: center 更改为 align-items: stretch，您可以获得与他们的答案相同的结果。

: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 
     display: flex;
     padding: 1rem;
     border: 1px var(--scpu-border) solid;
     min-width: max-content;
     justify-content: center;

.tag-cloud 
     overflow-x: none;
     overflow-y: none;

.tag-list 
     width: auto;
     display: grid;
     gap: 0.7rem;
     overflow-x: scroll;
     overflow-y: hidden;
     grid-template-columns: repeat(auto-fit, 1fr);
     grid-template-rows: repeat(3, 1fr);
     grid-auto-flow: column;

<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>

【讨论】：

他希望所有的块都有独立的宽度，不是吗？您也可以通过查看我的答案来提供帮助。

@ServeshChaturvedi 您的解决方案需要声明.tag-list 的宽度与正确数量的项目兼容。由于列表应该是动态的，因此很难找到最适合该宽度的值。

我认为可能需要一个 js 函数，它可以使用 getboundingclientrect 遍历元素以获得宽度总和以获得全宽加上间隙，然后可以除以 3。你怎么看？

【参考方案7】：

您可以使用如下脚本

   <div class="tag-cloud">
  <div id="elment_flex" 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>

<script type="text/javascript" >
var flex_elm = document.getElementById('elment_flex');

 let clientWidth = Math.max(
  flex_elm.scrollWidth,
  flex_elm.offsetWidth,
  flex_elm.clientWidth
  );
var rem = parseFloat(getComputedStyle(document.documentElement).fontSize);

flex_elm.style.maxWidth = ((clientWidth/3)+rem*1*flex_elm.children.length)+"px";
flex_elm.style.width = ((clientWidth/3)+rem*1*flex_elm.children.length)+"px";


flex_elm.style.flexWrap = 'wrap';


</script>

加载页面不换行，然后根据内容设置长度，然后设置“换行”。