예를 들어 div 안에 줄을 세는 방법이 있는지 궁금합니다. 다음과 같이 div가 있다고 가정 해보십시오.
<div id="content">hello how are you?</div>
여러 요소에 따라 div에는 한두 줄의 텍스트 줄이있을 수 있습니다. 스크립트가 알 수있는 방법이 있습니까?
즉, 자동 나누기는 DOM으로 전혀 표현됩니까?
- 답변 # 1
- 답변 # 2
하나의 해결책은 스크립트를 사용하여 모든 단어를 범위 태그에 포함시키는 것입니다. 그런 다음 주어진 스팬 태그의 Y 치수가 바로 이전의 태그보다 작 으면 줄 바꿈이 발생한 것입니다.
- 답변 # 3
요소의 라인 수를 계산하는 데 사용할 수있는 getClientRects () 함수를 확인하십시오. 사용 방법의 예는 다음과 같습니다.
var message_lines = $("#message_container")[0].getClientRects();
자바 스크립트 DOM 객체를 반환합니다. 이렇게하면 줄 수를 알 수 있습니다 :
var amount_of_lines = message_lines.length;
각 줄의 높이 등을 반환 할 수 있습니다. 스크립트에 추가 한 다음 콘솔 로그를 확인하여 수행 할 수있는 모든 작업을 확인하십시오.
console.log(""); console.log("message_lines"); console.log("............................................."); console.dir(message_lines); console.log("");
유의 사항이 있지만 포함하는 요소가 인라인 인 경우에만 작동하지만 포함하는 인라인 요소를 블록 요소로 둘러 싸서 너비를 제어 할 수 있습니다.
<div style="width:300px;" id="block_message_container"> <div style="display:inline;" id="message_container"> ..Text of the post.. </div> </div>
하지만 그런 스타일을 하드 코딩하는 것은 좋지 않습니다. 그것은 단지 예를 들기위한 것입니다.
- 답변 # 4
여기 및 다른 질문에 대한 답변에 만족하지 못했습니다. 가장 높은 등급의 답변은
padding
를 사용하지 않습니다 또는border
따라서,box-sizing
를 분명히 무시합니다 게다가. 내 대답은 여기에 다른 스레드와 일부 스레드를 결합하여 만족스럽게 작동하는 솔루션을 얻습니다.완벽하지 않다 :
line-height
에 대한 수치를 검색 할 수 없을 때 (예 :normal
또는inherit
), 그것은 단지font-size
를 사용합니다1.2
를 곱한 . 이 경우 다른 사람이 픽셀 값을 감지하는 신뢰할 수있는 방법을 제안 할 수 있습니다.그 이외의 스타일과 케이스를 처리 할 수있었습니다.
놀면서 테스트하기위한jsFiddle. 아래 인라인도 있습니다.
function countLines(target) { var style = window.getComputedStyle(target, null); var height = parseInt(style.getPropertyValue("height")); var font_size = parseInt(style.getPropertyValue("font-size")); var line_height = parseInt(style.getPropertyValue("line-height")); var box_sizing = style.getPropertyValue("box-sizing"); if(isNaN(line_height)) line_height = font_size * 1.2; if(box_sizing=='border-box') { var padding_top = parseInt(style.getPropertyValue("padding-top")); var padding_bottom = parseInt(style.getPropertyValue("padding-bottom")); var border_top = parseInt(style.getPropertyValue("border-top-width")); var border_bottom = parseInt(style.getPropertyValue("border-bottom-width")); height = height - padding_top - padding_bottom - border_top - border_bottom } var lines = Math.ceil(height / line_height); alert("Lines: " + lines); return lines; } countLines(document.getElementById("foo"));
div { padding:100px 0 10% 0; background: pink; box-sizing: border-box; border:30px solid red; }
<div id="foo"> x<br> x<br> x<br> x<br> </div>
- 답변 # 5
컨테이너 개체를 복제하고 2 글자를 쓰고 높이를 계산하십시오. 이것은 모든 스타일이 적용된 실제 높이, 선 높이 등을 반환합니다. 이제 높이 객체/문자 크기를 계산하십시오. Jquery에서 높이는 패딩, 여백 및 테두리를 능가합니다. 각 줄의 실제 높이를 계산하는 것이 좋습니다.
other = obj.clone(); other.html('a<br>b').hide().appendTo('body'); size = other.height() / 2; other.remove(); lines = obj.height() / size;
각 문자의 높이가 다른 희귀 글꼴을 사용하면 작동하지 않습니다. 그러나 Arial, mono, comics, Verdana 등과 같은 모든 일반 글꼴에서 작동합니다. 글꼴로 테스트하십시오.
예 :
<div id="content" style="width: 100px">hello how are you? hello how are you? hello how are you?</div> <script type="text/javascript"> $(document).ready(function(){ calculate = function(obj){ other = obj.clone(); other.html('a<br>b').hide().appendTo('body'); size = other.height() / 2; other.remove(); return obj.height() / size; } n = calculate($('#content')); alert(n + ' lines'); }); </script>
결과 :
6 Lines
표준을 벗어난 드문 기능없이 모든 브라우저에서 작동합니다.
확인 : https://jsfiddle.net/gzceamtr/
관련 자료
- javascript : 반응 JS (ES6)에서 객체 내부의 배열에서 요소를 제거하는 방법
- css - html에서 테이블 태그없이 td 또는 tr 태그 내의 요소를 대상으로 지정할 수없는 이유는 무엇입니까?
- python - 배열에있는 특정 요소의 수를 계산하는 방법은 무엇입니까?
- python 3.x - for 루프 내부에서 변수 수가 증가하지 않음
- Python의 각 하위 목록 내부에 요소가 나타나는 위치 가져 오기
- html - JavaScript를 사용하여 내부 요소의 스타일을 어떻게 변경합니까?
- c# - 링크 - 중첩 된 목록에서 값의 총 개수를 가져와 상위 목록에 저장
- java - ArrayList 1의 요소가 다른 ArrayList 2에서 발생하는 빈도를 어떻게 계산할 수 있습니까?
- javascript - html 요소 내부의 텍스트를 콘솔로 어떻게 기록합니까?
- python - xpath 요소에서 계산하는 방법
- html - 'a'요소로 래핑 된 'div'요소 내부의 텍스트에 밑줄을 긋지 마십시오
- sql - COUNT DISTINCT가 MAX 인 줄을 선택하는 방법은 무엇입니까?
- flutter - dart command line 앱 - 텍스트의 줄 수 계산
- java - 람다를 사용하여 줄을 처리하는 동안 줄 수 얻기
- MongoDB 집계 내에서 필드를 계산하는 방법은 무엇입니까?
- javascript - jquery에서 clone ()을 사용하는 동안 요소 안에 입력 된 텍스트 복제를 중지하는 방법
- python - 텍스트 파일의 특정 요소에서 단어의 발생 횟수를 계산하는 방법은 무엇입니까?
- filesystems - C에서 특정 확장자를 가진 파일의 행 수를 세려고하는 파일 디렉토리 탐색
- reactjs - div 요소 내부에 html 응답을 표시 할 수 없습니다
- shell - 새 줄이 데이터 안에있을 때 txt 파일의 줄 수 계산
- javascript : DOM 조작에서 루프 문제에 직면하고 있습니다. 아무나 볼 수 있습니까?
- javascript : 쓸 수 있니? document.write()를 사용하는 요소(및 그 이상)
- javascript : 태그 내부의 모든 정보 검색: DOMNODE
- javascript : 클릭 시 다른 텍스트를 표시하려면 어떻게 해야 합니까?
- javascript : 입력 값 html 및 js 추출
- javascript : 내 이름 Value, amount Value 및 dateValue가 정의되지 않은 이유는 무엇입니까?
- javascript : codepen.io 프로필 이미지 업로드 JQuery가 작동하지 않음
- javascript : s3 버킷의 X3d 파일이 로드되지 않음
- JavaScript를 사용하여 버튼 클릭 시 배열 값을 지우시겠습니까?
- javascript : Safari에서 클릭 시 텍스트 선택 유지
div의 크기가 내용에 의존하는 경우 (내 설명의 경우라고 가정) 다음을 사용하여 div의 높이를 검색 할 수 있습니다.
글꼴 줄 높이로 나눕니다 :
또는 명시 적으로 설정되지 않은 경우 줄 높이를 얻으려면 :
또한 패딩과 줄간 간격을 고려해야합니다.
수정
라인 높이를 명시 적으로 설정하는 완전히 자체 포함 된 테스트 :