不同长度单词的动态列数

如何解决不同长度单词的动态列数

因此，我尝试创建一个具有多个列的ul。 li中的这些单词条目应该显示在列中，但是我希望这些列是动态的， 意味着较长的单词会创建较少的列，而较短的单词会创建更多的列。 该页面应该以DINA4格式显示。 我已经尝试过使用FlexBox＆Grid，但是仅当我定义固定数量的列时才有效，因此没有动态列。

如果可能的话，我想避免使用javaScript，因为页面应仅由CS和HTML组成。 Short words with more columns Longs words with fewer columns

使用网格自动填充，我得到以下结果： Result with long words

我的代码：

  ul.words-o {
  margin-top: 0;
  margin-bottom: 1em;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  gap: 0 20px;
}

解决方法

您可以使用JavaScript通过自定义CSS var（-）;更新minmax值；

var bigW = "0";
// go through all children and keep the widest value
for (let e of document.querySelectorAll("ol > li")) {
  elW = e.offsetWidth;
  if (elW < 5) {} else if (elW > bigW) {
    bigW = elW
  }
// upddate the CSS var()
  document.documentElement.style.setProperty("--min-content",bigW + 1 + "px");
  // delay time to display as a grid untill every children's width have been tested
  setTimeout(document.querySelector("ol#ol-grid").classList.add("grid"),10);// if your computer is slow,increase it a bit,if your eye notices it,its too long
}

* {
  margin: 0;
  padding: 0;
}
.grid {
  display: grid;
}
ol {
  grid-template-columns: repeat(
    auto-fit,minmax(var(--min-content,200px),max-content)
  );
  gap: 20px;
}
li {
  display: inline-block;
  border: solid;
}

<ol id="ol-grid">  
  <li>lkgdsflkdgsh</li>
  <li>klfqh</li>
  <li>Lorem</li>
  <li> ipsum</li>
  <li> dolor</li>
  <li> sit</li>
  <li> amet</li>
  <li>consectetuer</li>
  <li> adipiscing</li>
  <li> elit.</li>
   <li>Aliquam</li>
  <li> tincidunt</li>
  <li> mauris</li>
  <li> eu</li>
  <li> risus.</li>
   <li>VestibulumVestibulum</li>
  <li> auctor</li>
  <li> dapibus</li>
  <li> neque</li>
</ol>

codepen to play with

---

另外， 您可以使用column-count和javascript将值重新分配给column-count onload和onresize

示例

function checkGridWidth() {
  let colCount = 12; // set col numbers to start with
  document.documentElement.style.setProperty('--colCount',colCount); // reset while on resize needs it
  let list = document.querySelector("#ol-grid");
  let vw = list.parentNode.offsetWidth;
  let myW = list.offsetWidth;
  if (myW > vw) {
    let dif = myW - vw;
    let colW = (myW / colCount);
    let newColCount = vw / colW;
    document.documentElement.style.setProperty('--colCount',Math.floor(newColCount - 1));
  }
}
window.onresize = checkGridWidth;
window.onload = checkGridWidth;

* {
  margin: 0;
  padding: 0;
}

div {
  margin: 3cm;
}

@media print {
  div>h1 {
    display: none;
  }
}

ol {
  padding: 5px;
  column-gap: 5px;
  column-fill: balance;
  column-count: var(--colCount,12);
  min-width: max-content;
  /* you need it so it can overflow its parent,js will use this width value*/
  margin: auto;
  border: solid;
  /*see me*/
}

li {
  display: block;
  border: solid;
  /*see me*/
}

li:not(:last-of-type) {
  margin-bottom: 5px;
}

<div>
  <h1> Redraw the right amount of column than can fit in here if too wide</h1>
  <ol id="ol-grid">
    <li>lkgdsflkdgsh</li>
    <li>klfqh</li>
    <li>Lorem</li>
    <li> ipsum</li>
    <li> dolor</li>
    <li> sit</li>
    <li> amet</li>
    <li>consectetuer</li>
    <li> adipiscing</li>
    <li> elit.</li>
    <li>Aliquam</li>
    <li> tincidunt</li>
    <li> mauris</li>
    <li> eu</li>
    <li> risus.</li>
    <li>VestibulumVestibulum</li>
    <li> auctor</li>
    <li> dapibus</li>
    <li> neque</li>
    <li>lkgdsflkdgsh</li>
    <li>klfqh</li>
    <li>Lorem</li>
    <li> ipsum</li>
    <li> dolor</li>
    <li> sit</li>
    <li> amet</li>
    <li>consectetuer</li>
    <li> adipiscing</li>
    <li> elit.</li>
    <li>Aliquam</li>
    <li> tincidunt</li>
    <li> mauris</li>
    <li> eu</li>
    <li> risus.</li>
    <li>VestibulumVestibulum</li>
    <li> auctor</li>
    <li> dapibus</li>
    <li> neque</li>
  </ol>
</div>

codepen to play with