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 중국어 웹사이트의 기타 관련 기사를 참조하세요!