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); 
}