홈>2020-02-01 00:48

javascript - DOM 요소 내에서 텍스트 줄을 어떻게 셀 수 있습니까? 할 수 있습니까?

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

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

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

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

javascript html 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/

Python2.net

javascript - DOM 요소 내에서 텍스트 줄을 어떻게 셀 수 있습니까? 할 수 있습니까?

관련 자료