JavaScript : 외부 객체의 크기에 따라 텍스트 잘림

Question

자바 스크립트를 사용하여 텍스트가있는 객체에 맞게 지정된 텍스트를 잘라서 끝에 "..."을 추가하고 싶습니다.

예 : 자바 스크립트는 타사 웹 서비스에서 가져온 데이터이므로 200x300px div에 텍스트를 넣어야합니다. 텍스트의 길이는 다양하므로 제공된 것보다 훨씬 많은 공간이 필요하다고 가정 해 봅시다.

텍스트를 잘라내어 끝에 "..."를 붙이면 테두리가 끊어지는 것을 방지하는 방법을 결정하는 방법은 무엇입니까?

Answer 1

이렇게 할 수있는 several jQuery plugins이 있습니다.

Answer 2

캔버스 요소를 사용해도 상관 없으면 텍스트 너비를 측정하는 데 사용할 수 있습니다. 다음은 예입니다 :

http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/demo/8_2_canvas_measureText.html

Answer 3

ruzee.com prototype.js 당신이 원하는 것을 할 [MIT 라이센스] 코드의 작은 비트를 사용 has a solution; demo

Answer 4

또한이 작업을 수행하는 CSS 3 속성 text-overflow을 살펴볼 수도 있습니다.

http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

이 브라우저가 지원하는 경우 당신은 항상 자바 스크립트가 후퇴 추가 할 수 있도록 확인 가능합니다.

if (!'textOverflow' in document.createElement('div').style) { 
    // Use JavaScript solution here 
}