如何对非字符串元素执行类似 "ellipsis" 的效果并将行限制为最多 2 行？

Question

目标是这样做：

问题是在第 2 行的末尾我需要添加两个“硬编码”的东西：

“#更多”按钮（仅在需要时）
“面部加号”按钮（始终）

这就是我要问的“省略号”效果。

我尝试了以下方法：

// HTML
<div class="container">
  <div class="children">
    Hola1
  </div>
   <div class="children">
    Hola2
  </div>
   <div class="children">
    Hola3
  </div>
    <div class="children">
    Hola4
  </div>
   <div class="children">
    Hola5
  </div>
   <div class="children">
    Hola6
  </div>
</div>

// css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 150px;
  border: 1px solid black;
  padding: 5px;
  height: 80px; // this makes the trick of having 2 rows
  overflow: hidden; // this makes the trick of having 2 rows
}

.children {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}

我得到了这个结果：

但我无法在第 2 行的末尾添加“固定”元素，因为列表中有更多隐藏元素。

一些要点：

元素的宽度是动态的
我最多需要 2 行。
在第 2 行的末尾，我需要有“# more”按钮（仅在需要时）和脸部图标。

提前致谢

Answer 1

为避免进行繁琐的运算，您可以清除容器，一次添加一个元素，查看您刚刚添加的元素（加上其关联的 'more' 元素和图标）走出容器底部。

如果已经到底部外面了就往回走，所以more的说法是正确的。

我不知道你是否打算将 more 语句和图标放入 DOM 中（或者是否可能通过为它们留下 space 的伪元素）。此代码段在 DOM 中包含它们，因此您可以单击更多元素然后执行任何您想执行的操作。

并且您必须在每次加载和调整大小时运行此代码。

const container = document.querySelector('.container');
container.style.visibility = 'hidden'; //just in case there's a little flash as we add the elements
const cbottom = container.getBoundingClientRect().bottom;
const children = document.querySelectorAll('.children');
const num = children.length;

container.innerHTML = '<div class="moreEl"><span class="remainder">xxx</span> MORE</div><img src="youricon.jpg" style="width: 20px; aspect-ratio: 1 / 1;">';
const moreEl = container.querySelector('.moreEl');
const remainder = moreEl.querySelector('span');

// now add each child one at a time, with either the 'nn more' plus icon or just the icon in front of it until the child is outside the container when step back one
let i = 0;
for (i; i < children.length; i++) {
  remainder.innerHTML = num - i - 1;
  container.insertBefore(children[i], moreEl);

  if ((children[i].getBoundingClientRect().top > cbottom) || (moreEl.getBoundingClientRect().top >= cbottom)) {
    // can't get this element in, let alone with any associated more element, so go back one
    children[i].parentElement.removeChild(children[i]);
    remainder.innerHTML = num - i;
    break;
  }
}

if (i >= (num - 1)) {
  moreEl.parentElement.removeChild(moreEl);
} else {
  for (let j = i; j < num; j++) {
    container.append(children[j]);
  }
}
container.style.visibility = 'visible';

* {
  box-sizing: border-box;
}

.container {
  visibility: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 150px;
  border: 1px solid black;
  padding: 5px;
  height: 80px;
  /* this makes the trick of having 2 rows */
  overflow: hidden;
  /* this makes the trick of having 2 rows */
}

.children {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}

.moreEl {
  padding: 10px;
}

<div class="container">
  <div class="children">
    Hola1
  </div>
  <div class="children">
    Hola2
  </div>
  <div class="children">
    Hola3
  </div>
  <div class="children">
    Hola4
  </div>
  <div class="children">
    Hola5
  </div>
  <div class="children">
    Hola6
  </div>
  <div class="children">
    Hola7
  </div>
  <div class="children">
    Hola8
  </div>
  <div class="children">
    Hola9
  </div>
  <div class="children">
    Hola10
  </div>
</div>

注意：此代码段包含更多 'Hola' 个元素，因此可以更轻松地测试不同的容器宽度。

如何对非字符串元素执行类似 "ellipsis" 的效果并将行限制为最多 2 行？

How to do an "ellipsis" like effect for non string elements and restrict rows up to 2?

html

javascript

css

sass

reactjs