DOM 요소 내에서 줄 수 세기

DOM 요소 내에서 텍스트 줄 수를 결정할 수 있지만 몇 가지 고려 사항이 필요합니다. 요소의 스타일 및 크기.

DOM의 자동 줄 바꿈

텍스트의 자동 줄 바꿈은 DOM 자체에 직접 표시되지 않습니다. DOM에는 원시 텍스트 콘텐츠만 포함됩니다.

요소 높이를 기준으로 줄 계산

그러나 요소의 높이가 콘텐츠에 따라 달라지는 경우 요소 수를 추정할 수 있습니다. 높이를 글꼴 줄 높이로 나누어 줄 수를 계산합니다.

var divHeight = document.getElementById('content').offsetHeight;
var lineHeight = document.getElementById('content').style.lineHeight;
var lines = divHeight / lineHeight;

간격 및 안쪽 여백 조정

여백 및 줄 간 간격이 이 계산의 정확성에 영향을 미칠 수 있다는 점에 유의하세요.

예

다음 코드는 줄 높이가 설정된 div 요소의 줄 수를 계산하는 방법을 보여줍니다.

  hello how are you? hello how are you? hello how are you? hello how are you?

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

이 코드는 div 요소의 줄 수와 함께 경고를 표시합니다.