JS /角 - 弄清楚HTML元素有多少父元素的宽度/高度内

Question

我想创建这样的事情在这里：https://www.amazon.de/Meisterwerke-Weltliteratur-Sammlung-internationaler-Meistererzählungen/dp/3839892716/

如果你让你的浏览器窗口的宽度或更大的话，你会注意到authors-element的后缀（总是一行）会说“X-authors hidden - 显示全部”。我如何计算有多少元素/作者超出了作者 - 父元素的界限，因此我可以通过单击该后缀来告诉用户他可以展开多少元素？

我使用角度4，但如果你知道纯JS的解决方案，我可能能够翻译它。

[编辑]：我添加了两个屏幕截图来显示效果，例如： “& 16 mehr”和“& 14 mehr”（德语为16或14以上）。

和

Answer 1

写指令，谁听的窗口大小调整，是这样的：

@HostListener('window:resize', ['$event']) 
onResize(event) { 

    const elementHeight = event.target.innerHeight; 
    const parentHeight = window.innerHeight; 
    const visibleElements = parentHeight/elementHeight; 
    const hiddenElements = Math.ceil(elementHeight - visibleElements); 
    console.log(hiddenElements); 
}