단어 줄 바꿈과 다른 응용 프로그램을 위해 HTML에 텍스트 줄이 얼마나 넓어지는 지 알 수 있습니다.

텍스트 줄의 너비가 넓어서 고정 된 너비에 맞게 정확히 끊을 수있는 좋은 브라우저 간 방법을 알고 있습니까?단어 줄 바꿈과 다른 응용 프로그램을 위해 HTML에 텍스트 줄이 얼마나 넓어지는 지 알 수 있습니다.

너비가 너무 긴 텍스트를 고정 폭 컨테이너로 오버플로하지 않으려 고하지만 가능한 한 가장 가까운 경계선을 끊으려는 경우 을 삽입 할 위치를 추측하는 것이 깨끗하지 않다고 가정합니다. 해결책.

조사하고 싶습니다. 보이지 않는 div가 있고 그 안에 줄을 인쇄하고 div의 너비 또는 그와 유사한 것을 자바 스크립트로 확인하면 될 것이라고 상상해 봅니다.

누구나 이런 식으로 일 했습니까?

* (초점이없는 줄 바꿈, 즉 지금 내 마음에 오는 단지 응용 프로그램,하지만 텍스트의 폭을 아는 것이 내가 원하는입니다)

출처

2009-08-01 Petruza

http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript –

@Josef : 해당 질문의 대답은 페이지의 시각적 모양에 영향을 미칠 수 있습니다. 특히 IE에서는 수평 스크롤 막대가 사용자에게 명백한 이유없이 표시 될 수 있습니다. – AnthonyWJones

@AnthonyWJones : 거기에 답변을 추가 할 수도 있습니다. –

완전한 "히스 로빈슨"(즉 참조를하지 여행 잘?) 접근.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <script type="text/javascript"> 
     function txtContent_onchange() 
     { 
      var span = document.getElementById("spanMeasure") 
      span.innerHTML = ""; 
      span.appendChild(document.createTextNode(this.value)); 
      document.getElementById("txtWidth").value = span.scrollWidth; 

     } 
    </script> 
    <style type="text/css"> 
     #spanMeasure 
     { 
      position:absolute; 
      top:0px; 
      left:0px; 
      visibility:hidden; 
      width:10px; 
      white-space:nowrap; 
      overflow:hidden 
     } 
    </style> 
</head> 
<body> 

    <input id="txtContent" onchange="txtContent_onchange.call(this)" /><br /> 
    <input id="txtWidth" /> 
    <span id="spanMeasure"><span> 

</body> 
</html>

여기서 중요한 것은 span 요소의 구성입니다. 이 요소는 페이지의 시각적 모양에 영향을 미치지 않습니다. scrollWidth 속성은 포함 된 텍스트의 길이를 반환합니다. 물론 합리적인 값을 얻으려면 글꼴 스타일 속성을 설정해야합니다.

quirksmode 사이트에 따르면 Opera는이 접근 방식에 약간 희박 할 수 있지만 브라우저 간 완벽한 솔루션에 가장 근접한 것으로 의심됩니다.

출처

2009-08-01 20:45:33 AnthonyWJones

단어 줄 바꿈과 다른 응용 프로그램을 위해 HTML에 텍스트 줄이 얼마나 넓어지는 지 알 수 있습니다.

답변

관련 문제