문자열이 화면에 표시되는 시간을 알고 싶습니다. 우리는 그래서, 고정 폭 글꼴을 사용하지 않는 :시각적으로 긴 문자열은 얼마나됩니까?
"Our mother's tummy makes dummy noises."
보다 훨씬 넓은 :
"Lilly Leadbetter lives life leisurely."
문자입니다 얼마나 뭔가 알 수있는 방법이 있나요? 픽셀 정확도는 필요치 않습니다. 대략 타원을 찍을 수있을 정도의 길이입니다. CSS가 얼마나 오랫동안 그것을 결정한 후에 나는 타원을 붙일 수 없기 때문에 CSS 오버 플로우는 도움이되지 않습니다.
일반적으로 fsb에 동의하는 것은 웹에서 모든 것을 픽셀 완벽하게 제어 할 수 없음을 이해해야한다는 것입니다. 그것은 인쇄되지 않습니다. 합리적인 길이를 선택하고 서버 측에서 잘라 내면 단어 중간에 잘게 잘라서 조금 더 잘 보이게 할 수 있습니다.
완벽한 길이를 고집하는 경우 jQuery 플러그인 ThreeDots을 확인하십시오.
여기에 적어도 부분 솔루션 인 related question이 있습니다. 기본적으로 기술은 텍스트를 숨겨진 <span>에 렌더링 한 다음 JavaScript를 사용하여 범위의 픽셀 너비를 측정 한 다음 대상 너비에 맞을 때까지 문자를 잘라냅니다.
this related question에서 링크 된이 종류의 기능을 캡슐화 한 여기에 a jQuery plugin이 있습니다.
고정 폭 글꼴을 사용하는 경우가 아니면 간단한 방법이 없다고 생각합니다. 아마도 가장 쉬운 방법은 후보 텍스트를 렌더링하고 그것이 얼마나 오래 있는지를 보는 것입니다.
서버 측에서는 브라우저가 텍스트로 수행 할 작업을 확실히 모르기 때문에 약간의 히트 앤 미스입니다. GD (또는 그와 비슷한 것)를 사용하고 브라우저가 사용하는 글꼴 및 크기를 가장 잘 추측 할 수 있지만 추측을 신뢰할 수 없을 때 문제가 될만한 가치가 있습니까?
클라이언트 측 자바 스크립트에서 (또는 무엇이든) 브라우저에서 텍스트를 렌더링하고 렌더링 된 DOM 객체의 길이를 확인할 수 있습니다 (요르단에 의하면).
한 가지 해결책은 심리학 적으로 매우 어려울지라도 웹 페이지 렌더링이 타이포그래피가 아니라는 것을 이해하는 것입니다. 너는 통제권이 없다. 최선을 다하고 한계를 수용하고 다음 문제로 넘어갑니다. 기술적으로는 간단하지만 수용하기가 쉽지 않습니다.
도우미 기능 truncate을 사용할 수 있습니다. 시각적 길이를 알고 있다고해도 모든 브라우저/브라우저 창의 크기를 조정할 수는 없습니다.
재미있는 플러그인 ... 몇 백 줄의 문자열을 잘라내어 페이지를 수행하는 것이 궁금합니다 ... 예를 들어 ... –
와우, ThreeDots가 정말 놀랍습니다 ... 나는 그것을 확실히 확인하려고합니다! – aronchick