브라우저 윈도우의 라인에 맞는 문자 수를 인식하는 JavaScript (jQuery를 사용하고 있습니다)로 작성해야합니다. 문제를 해결하기 위해 모노 스페이스 글꼴을 사용하고 있지만 다른 글꼴로 일반화하면 더 좋을 것입니다.문서 너비에 맞는 문자 수를 측정하려면 어떻게합니까?
브라우저에서 한 행에 몇 개의 문자가 채워지는지 어떻게 알 수 있습니까? 의도는 한 행을 채우는 문자의 수를 세는 것입니다.
포장을 감지 할 때까지 요소를 생성하고 문자를 추가 할 수 있습니다 (예 : offsetHeight의 변화를 관찰하여 (이분법 알고리즘을 사용하여 최적화 할 수 있습니다).
물론 이것은 브라우저, 시스템, 설치된 글꼴 및 사용자 설정에 따라 달라 지므로 페이지가 표시되거나 크기가 조정되거나 사용자가 글꼴 크기를 변경할 때 텍스트의 각 조각에 대해 계산해야합니다 (전체 페이지 확대/축소는 문자 수가 변경 될 수있는 off-by-one 오류를 유발합니다).
따라서 대부분의 상황에서 과도한 행동 일 수 있으며 구현이 잘못되면 해결하는 것보다 더 많은 문제가 발생할 수 있습니다.
다른 해결책이 있습니다. 한 행만 표시되도록하려면 white-space:nowrap 및 overflow:hidden을 사용하고 일부 브라우저에서는 text-overflow:ellipsis을 사용하여 텍스트를 잘게 잘라낼 수 있습니다. 또는 단어를 자르지 않으려면 overflow:hidden 인 1 행의 높은 컨테이너를 사용하십시오.
감사합니다. 여기에 대해 생각하지 못한 몇 가지 좋은 제안이 있습니다. :) – warp
당신은
window.innerWidth
으로 브라우저의 전체 폭을 사용할 수 있습니다 그리고 당신은 다음과 같은 방법으로 요소의 폭을 얻을 수 있습니다.
document.getElemenById('elem').clientWidth
이것은 모노 스페이스 글꼴 (windowWidth/elementWidth)에서 사용할 수 있습니다. – alvatar
그것은 신경 쓰지 않고 그냥 요소의 witdh를 반환합니다. 그것은 해결책이 아닐지 모르지만, 당신에게 할 몇 가지 힌트를 줄 수 있습니다 .. –
HTML에서 쉽게이를 수행 할 수있는 방법은 없습니다. ,
이첫째, 당신이 필요로하는 폭이 <DIV>을 만들에 일부 문자를 넣어 그 .height의 요청 : 당신이 정말 알고해야하는 경우
그러나, 당신은 아마 정말 추한 자바 스크립트로 알아낼 수 있습니다 (픽셀 단위). 그런 다음 문자를 계속 추가하고 div > div의 높이가 변경되어 새로운 줄의 텍스트에 맞춰 졌을 때 .height()를 계속 확인합니다.
그래, 이것이 길인 것 같습니다. 추악하지만 작동하는 경우 ... : D – alvatar
브라우저 크기를 조정하면 어떻게됩니까? 사용자가 페이지를 변경하거나 페이지의 크기를 조정할 때마다이 값을 다시 계산하면 자원에 큰 부담이됩니다 –
여기서 무엇을하려고합니까? 더 좋은 방법이있을 수 있습니다. HTML의 플로우 레이아웃은 실제로 이런 종류의 것을 위해 설계되지 않았습니다. –