如何偵測 HTML 元素中的內容溢出？

偵測 HTML 元素中的內容溢位

在元素內的內容超出其指定大小的情況下，決定是否元素溢位。這對於實現諸如內容溢出時顯示附加按鈕之類的功能特別有用。

提供的函數 isOverflown(element) 提供了完成此任務的簡單方法。它根據元素的 clientHeight 和 clientWidth 評估元素的scrollHeight 和scrollWidth。如果其中任何一個值超過其對應值，則表示元素溢位。

function isOverflown(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

此功能可用於各種應用程序，包括：

1. 自動調整元素大小基於內容長度。
2. 顯示溢出指示器（例如捲軸或按鈕）。
3. 透過在內容被截斷時提供附加上下文來增強使用者體驗。

以下程式碼範例示範了isOverflown 函數的用法：

var els = document.getElementsByClassName('demos');
for (var i = 0; i < els.length; i++) {
  var el = els[i];
  el.style.borderColor = (isOverflown(el) ? 'red' : 'green');
  console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown.");
}

CSS可用來設定元素樣式以進行示範用途：

.demos {
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
  border: 3px solid black;
}

HTML：

<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>

以上是如何偵測 HTML 元素中的內容溢出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！