오버플로 숨겨진 텍스트 콘텐츠 너비 가져 오기

Question

Excel과 비슷한 기능을 사용하려고합니다. 열 리사이저를 두 번 클릭하고 해당 열의 콘텐츠의 최대 너비까지 특정 열을 확장하십시오.

문제점 : 오버플로 숨김 및 텍스트 오버플로 줄임표로 div 내에서 텍스트 콘텐츠 너비를 얻는 방법을 모르겠습니다. 그리고 나는 이것이 작동하기 위해 어떤 트릭을 신청해야하는지 잘 모르겠습니다. 나는 이런 것을 시도한 적이 없다.

현재 HTML 마크 업 :

<div style="width: @manuallySetWidthInPx">text</div> 

현재 CSS : 내가 다시 요인에 <div />과 CSS를 내부 텍스트 내용의 실제 폭을 얻을 필요가 어떻게

position: relative; 
min-width: 50px; 
float: left; 
padding: 5px; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
white-space: nowrap; 
overflow: hidden; 
-ms-text-overflow: ellipsis; 
-o-text-overflow: ellipsis; 
text-overflow: ellipsis; 

?
jQuery을 사용해도 좋습니다.

참고 : 텍스트 줄임표를 유지하면서이 작업을 수행하려고합니다. 따라서 해당 행을 복제해야한다면 잘 할 수 있습니다.

Answer 1

나는 DIV을 다음과 같은 CSS로 화면을 해제 배치

#two{ 
    width: auto !important; 
    top: -100px; 
} 

HTML 그리고 숨겨진 DIV에 표시된 DIV의 텍스트를 전송하기 위해 다음과 같은 자바 스크립트를 사용하여

<div id = "one"> 
    gibbfasdfsdfasdfasdfasdfasdfASDadsAS 
</div> 

<div id = "two"> 


</div> 

및 숨겨진 DIV의 너비를 잡아라.

$(document).on("click", "#one", function(){ 
    var value = $("#one").text(); 
    $("#two").text(value); 
    var div_width = $("#two").width(); 
    alert(div_width); 
}); 

바이올린 here

는 자바 스크립트 코드 위를 사용하는 상황에 따라 일부 성능 문제가있을 수 있습니다. 그래도 반복 반복을위한 루프를 실행하는 데 아무런 문제가 보이지 않습니다.