如何計算 DOM 元素中的行數？

計算DOM 元素中的行數

可以確定DOM 元素中文字的行數，但這需要一些考慮元素的樣式和尺寸。

DOM 中的自動換行符

文字中的自動換行符不會直接在 DOM 本身中表示。 DOM 只包含原始文字內容。

根據元素高度計算行數

但是，如果元素的高度取決於其內容，則可以估計行數通過將高度除以字體行高來劃分行。

<code class="js">var divHeight = document.getElementById('content').offsetHeight;
var lineHeight = document.getElementById('content').style.lineHeight;
var lines = divHeight / lineHeight;</code>

間距和填充的調整

請記住，填充和行間間距可能會影響

示例

以下程式碼示範如何計算具有設定行高的div 元素中的行數：

<code class="html"><div id="content" style="width: 80px; line-height: 20px">
  hello how are you? hello how are you? hello how are you? hello how are you?
</div></code>

<code class="js">function countLines() {
  var el = document.getElementById('content');
  var divHeight = el.offsetHeight;
  var lineHeight = parseInt(el.style.lineHeight);
  var lines = divHeight / lineHeight;
  alert("Lines: " + lines);
}</code>

此程式碼顯示一個警報，其中包含div 元素中的行數。

以上是如何計算 DOM 元素中的行數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！