Javascript : 컨테이너 크기에 따라 HTML 텍스트에 줄임표 추가하기

Question

텍스트가 포함 된 div가 있습니다. 텍스트는 두 줄로 줄여야하고 끝에 "..."가 추가되어 더 많은 것이 있음을 나타냅니다.
글꼴 및 글꼴 크기는 사용자의 설정 (예 : 브라우저의 "텍스트 크기"설정, 다른 브라우저 등)에 따라 다를 수 있으므로 클라이언트 측에서 동적으로이 작업을 수행해야합니다.

이 작업을 수행하는 가장 좋은 전략은 무엇입니까?
감사합니다.

Answer 1

Microsoft는 개척자가 Internet Explorer에서 개발자에게 제공해온 몇 가지 CSS 기능을 오랫동안 사용하고 있습니다. 이러한 기능 중 하나는 text-overflow 속성이며 is now in CSS3이며 Safari 및 Opera에 구현되어 있습니다. 그러나 파이어 폭스는 여전히이 기능을 지원하지 않습니다.

• Ajaxian - Text-Overflow for Firefox via jQuery

---

UPDATE :jQuery 프레임 워크의 생략 기능의 크로스 브라우저 자바 스크립트 구현을 위해

, 당신은 다음 문서를 체크 아웃에 관심이있을 수 있습니다

jQuery는 문자열 "..."이 일치하지 않는보기의 순수 인쇄상의 기반 관점에서

• Javascript Tutorial - How to Auto Ellipse Text
• JavaScript Ellipsis or Cross-Browser "truncate with dots"
• Ajaxian - Ellipsis or "truncate with dots" via JavaScript

Answer 2

표시 할 텍스트의 문자 수를 정의해야합니다. 그런 다음 문자열 변수에 넣은 문자를 저장하면서 정의 된 문자 수에 도달 할 때까지 for 루프를 사용하여 텍스트를 살펴보십시오. 정의 된 문자 수에 도달하면 for 루프가 끝나고 "..."문자열을 빌드 문자열 변수에 추가합니다. 그것이 컨테이너에 대한 새로운 텍스트입니다. 여기에 몇 가지 코드입니다 : 글꼴 및 글꼴 크기의 문제에 관해서는

nchars = 50; 
div = document.getElementById("your_div_with_text"); 
divText = div.innerHTML; 
newDivText = ""; 
for(var i = 0; i < nchars; i++){ 
    newDivText += divText[i]; 
} 
newDivText += "..."; 
div.innerHTML = newDivText; 

, 당신은 아마 모든 브라우저에서 최선을 보았다 글꼴 크기 및 글꼴 가족을 포함하는 CSS 클래스를 설정할 수 있습니다.