不同长度单词的动态列数

Question

所以我尝试创建一个具有多个 li 条目的 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;
}

Answer 1

您可以使用 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