>

예를 들어 div 안에 줄을 세는 방법이 있는지 궁금합니다. 다음과 같이 div가 있다고 가정 해보십시오.

<div id="content">hello how are you?</div>

여러 요소에 따라 div에는 한두 줄의 텍스트 줄이있을 수 있습니다. 스크립트가 알 수있는 방법이 있습니까?

즉, 자동 나누기는 DOM으로 전혀 표현됩니까?


  • 답변 # 1

    div의 크기가 내용에 의존하는 경우 (내 설명의 경우라고 가정) 다음을 사용하여 div의 높이를 검색 할 수 있습니다.

    var divHeight = document.getElementById('content').offsetHeight;
    
    

    글꼴 줄 높이로 나눕니다 :

    document.getElementById('content').style.lineHeight;
    
    

    또는 명시 적으로 설정되지 않은 경우 줄 높이를 얻으려면 :

    var element = document.getElementById('content');
    document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");
    
    

    또한 패딩과 줄간 간격을 고려해야합니다.

    수정

    라인 높이를 명시 적으로 설정하는 완전히 자체 포함 된 테스트 :

    function countLines() {
       var el = document.getElementById('content');
       var divHeight = el.offsetHeight
       var lineHeight = parseInt(el.style.lineHeight);
       var lines = divHeight / lineHeight;
       alert("Lines: " + lines);
    }
    
    
    <body onload="countLines();">
      <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>
    </body>
    
    

  • 답변 # 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/

관련 자료

  • 이전 java - jdbc 연결 실패, 오류 - 호스트에 대한 tcp/ip 연결 실패
  • 다음 c++ - C ++ 11 지원을 확인하려면 어떻게합니까?