獲取垂直溢出容器的HTML內容

Question

有沒有一種方法可以使用javascript選擇超出某個父級高度的所有子內容？例如：我有一個固定高度的兩列布局。如果第一列中的內容垂直溢出，我希望能夠將溢出的內容移動到第二列，所以我需要一種方法來選擇它。

我沒有檢測內容是否溢出使用this technique但我找不到一種方法來選擇溢出的內容。

Answer 1

使用javascript，您可以計算出適合雙列布局第一列的單詞數。您可以通過爲測量目的製作第一列的副本來「屏幕外」（用戶不會看到它）。例如，給一個容器的絕對位置超出邊界（例如，top：-10000px，left：-10000px）。除了定位之外，請給它與您的雙列布局中的第一列完全相同的css（字體，行高等）。使用javascript，一次一個地添加單詞到容器。添加每個單詞後，檢查容器是否已溢出。一旦你達到了這一點，這將適合你的第一列（減去實際上使其溢出的詞）;字符串的其餘部分（包括那個單詞）進入第二列。