接受的答案在这里非常非常接近，是我想要的。我有一个垂直的Flexbox，其中的项目具有固定的高度。我希望显示尽可能多的项目，但是如果某个项目完全溢出，则应完全省略。尝试链接答案中的代码片段，以了解我的意思。通过设置'flex-wrap：wrap'和隐藏在容器上的溢出，可以很容易地实现这种效果。
但是，我还有一个问题：我不仅要显示这些项目，还需要知道当前正在显示多少。我试图显示尽可能多的项目，例如，如果有五个项目不合适，标签的底部将显示“ ...和另外5个”。最简单的方法是什么？我希望避免将容器的高度除以单个项目的高度（如果可能）。肯定有更好的办法。
经过大量的挖掘，终于找到了令我满意的解决方案。使用元素的offsetLeft以确定要包装的元素。进行相同的操作，但对水平柔韧性框使用offsetTop。
CSS：
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
反应：
const items = [...]; // Array of ReactElements
const [numberOfItemsDisplayed, setNumberOfItemsDisplayed] = useState(0);
const ref = useRef(null)
useLayoutEffect(() => {
const cells = ref.current?.children;
if (cells && cells.length > 0) {
const startingOffset = cells[0].offsetLeft;
let numItems = 0;
for (let i = 0; i < cells.length; i++) {
if (cells.offsetLeft > startingOffset) {
break;
}
numItems++;
}
setNumberOfItemsDisplayed(numItems);
}
}, []);
return <div class="container" ref={ref}>{items}</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句