CSS 텍스트 오버 플로우 감지 : Firefox의 줄임표

Question

텍스트 오버플로가 적용될 때 javascript를 통해 감지하려고합니다. 많은 연구 후에, 나는 파이어 폭스의 모든 버전을 제외하고, 작업 솔루션을 가지고 : 브라우저를 조정하면 줄임표가 적용되는

http://jsfiddle.net/tonydew/mjnvk/

은, 크롬, 사파리, 심지어 IE8 +는 생략임을 알려드립니다 있도록 유효한. 파이어 폭스 (17과 18을 포함하여 모든 버전을 시도했지만)별로. Firefox는 줄임표가 활성화되어 있지 않다고 항상 알려줍니다.

파이어 폭스에서

Firefox (OS X): 
116/115 - false 
347/346 - false 

Chrome (OS X): 
116/115 - false 
347/851 - true 

, scrollWidth이의 offsetWidth에 비해 결코 큰 : 왜

을 console.log()는 출력을 보여줍니다.

솔루션에 가장 가까운 것은 "Why are IE and Firefox returning different overflow dimensions for a div?"이지만 이미 제안 된 솔루션을 사용하고 있습니다.

누구든지 Firefox에서이 작업을 수행하는 방법에 대해 설명해 줄 수 있습니까?

---

EDIT : 아래 @Cezary 답변 외에, 나는 마크 업을 변경하지 않아도되는 방법을 발견했다. 이것의 효율성에 대한 의견이

$(function() { 
    $('.overflow').each(function(i, el) { 
     var element = $(this) 
         .clone() 
         .css({display: 'inline', width: 'auto', visibility: 'hidden'}) 
         .appendTo('body'); 

     if(element.width() > $(this).width()) { 
      $(this).tooltip({ 
       title: $(this).text(), 
       delay: { show: 250, hide: 100 }, 
      }); 
     } 
     element.remove(); 
    }); 
}); 

http://jsfiddle.net/tonydew/gCnXh/

누구 : 일시적 대해 측정을 수행하는 각 요소를 복제합니다 때문에, 그것은 조금 더 작업을하고있다? 많은 잠재적 오버 플로우 요소가있는 페이지가 있으면 부정적인 영향을 미치게 될까요? 내가 할 수 있으면 기존 마크 업을 수정하는 것을 피하고 싶지만 각 페이지로드에 과도한 JS 처리를 희생해서는 안됩니다.

당신이 파이어 폭스에서 작동하도록 각 TD 내부 사업부를 추가 할 필요가

Answer 1

,

<td class="first"><div>Here is some text</div></td> 
<td class="second"> 
    <div>Here is some more text. A lot more text than 
    the first one. In fact there is so much text you'd think it was a 
    waste of time to type all ofit. 
    </div> 
</td> 

CSS

td div { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow:hidden; 
    width:100%; 
} 

Jsfiddle

http://jsfiddle.net/mjnvk/7/

Answer 2

나는 실제로 jQuery 플러그인을 작성 이것을하기 위해. 잘린 경우는 단순히 텍스트 전체를 대상 요소의 title을 설정하지만 당신은 당신의 정확한 요구에 적응할 수

/** 
* @author ach 
* 
* Sets the CSS white-space, overflow, and text-overflow properties such that text in the selected block element will 
* be truncated and appended with an ellipsis (...) if overflowing. If the text is truncated in such a way, the 
* selected element's 'title' will be set to its full text contents and the cursor will be set to 'default'. 
* For this plugin to work properly, it should be used on block elements (p, div, etc.). If used on a th or td element, 
* the plugin will wrap the contents in a div -- in this case, the table's 'table-layout' CSS property should be set to 'fixed'. 
* 
* The default CSS property values set by this plugin are: 
*  white-space: nowrap; 
*  overflow: hidden; 
*  text-overflow: ellipsis 
* 
* @param cssMap A map of css properties that will be applied to the selected element. The default white-space, 
* overflow, and text-overflow values set by this plugin can be overridden in this map. 
* 
* @return The selected elements, for chaining 
*/ 

$.fn.truncateText = function(cssMap) { 
    var css = $.extend({}, $.fn.truncateText.defaults, cssMap); 

    return this.each(function() { 
     var $this = $(this); 
     //To detect overflow across all browsers, create an auto-width invisible element and compare its width to the actual element's 
     var element = $this.clone().css({display: 'inline', width: 'auto', visibility: 'hidden'}).appendTo('body'); 
     if (element.width() > $this.width()) { 
      //If a th or td was selected, wrap the content in a div and operate on that 
      if ($this.is("th, td")) { 
       $this = $this.wrapInner('<div></div>').find(":first"); 
      } 
      $this.css(css); 
      $this.attr("title", $.trim($this.text())); 
      $this.css({"cursor": "default"}); 
     } 
     element.remove(); 
    }); 
}; 
$.fn.truncateText.defaults = { 
    "white-space" : "nowrap", 
    "overflow"  : "hidden", 
    "text-overflow" : "ellipsis" 
}; 

그리고 사용, 단순히 JS을 포함하고 전화 :

$(".override").truncateText(); 

을

이것은 프로덕션 환경에서 사용되어 왔으며 한 페이지에 수백 개의 대상 요소가 있다는 악영향을주지 않았습니다.