CSS 텍스트 오버 플로우가 생략 부호 앞에 붙습니다.

Question

파일 경로 목록이있는 ul>li 구조가 있습니다. 약 200px 크기의 컨테이너에 있으므로 더 긴 경로는 잘 작동하지만 원하는 것은 아니지만 줄 바꿈됩니다.

text-overflow: ellipses을 사용하면 파일 이름을 볼 수 있다는 점을 제외하고는 잘 작동합니다. 따라서 파일 이름을 잘라내어 끝 부분을 표시하는 것이 좋습니다.

저는 이것이 CSS에서는 가능하지 않기 때문에 JS를 사용해야 할 것이라고 가정하고 있습니다. 유일한 문제는 가능한 한 눈에 거슬리지 않아야한다는 것입니다. li의 텍스트는 개체를 클릭하면 참조됩니다.

좋은 접근 방식에 대한 아이디어가 있습니까? http://jsfiddle.net/qbvcn/

Answer 1

간단한 해결책이 같은 것 (당신이 jQuery를 사용 기꺼이 가정) :

​$('li').each(function() { 
    var $this = $(this); 
    if ($this.text().length > 20) { 
     $this.html($this.text().replace(/^(.*)(.{17})$/, '<span style="display:none">\$1</span><span class="ellipsis">...</span>\$2')); 
    } 
});​​​​​​​ 

이 정말 단지 당신이 당신의 요소에 저장할 수있는 문자의 수를 알고있는 경우 일 것입니다. 비록이 값을 계산하기위한 자바 스크립트를 추가하면 이것을 극복 할 수 있지만, see this question.

Answer 2

text-overflow이 가지고있는 좋은 CSS 기능이지만, 그것이 제공하는 기능에 다소 제한됩니다

나는 그래서 여기에 내가 뭘 무엇을, 사람들이 항상 코드를 원하는 것을 알고있다. 텍스트의 끝 부분에 줄임표를 추가하고 잘라내는 것뿐입니다. 여기에는 여러분이 원하는 것을 할 수있는 옵션이나 유연성이 없습니다.

많은 사람들 (including myself)은 모질라가 FF7까지 파이어 폭스에서 그것을 지원하기를 거절했을 때 소란스러워했지만, 유연성이 부족하기 때문에 모질라가 그것을 빨리지지하지 않는 이유는 옳았다.

단순한 후행 줄임표 이상을 원한다면 Javascript로해야합니다. @GolezTrol이 주석에서 지적한 ThreeDots jQuery plugin이 유용 할 수 있습니다. 그러나 다른 옵션이 있습니다.