오버플로로 요소가 얼마나 많은 픽셀을 잘라내는지 알려주는 방법 : 부모에서 숨김

Question

<div class="parent" style="width: 50px; overflow: hidden;"> 
    <div class="child" style="white-space: nowrap;">Some string of text wider than 50 pixels</div> 
</div> 

.parent 및 .child보고 너비는 모두 50 픽셀이지만 .child는 50 픽셀을 초과하여 확장되어야합니다. 자식 요소가 부모를 얼마나 오버플로하는지 판단하는 방법이 있습니까?

.child가 위치 일 때와 같은 것 : 절대적, 실제로 얼마나 자세하게 만들지 않고 얼마나 넓습니까?

Answer 1

너는 scrollwidth을 알고 싶다. 예를 들어, http://jsfiddle.net/y8uZe/1

document.getElementById("child").scrollWidth; 

편집 : 파라미터 nowrap를 : 확실히 공백으로 할 필요 파이어 폭스 버그의 일종처럼 보인다. scrollHeight는 당신에게 올바른 가치를 부여하는 방법을 당신은 분명히 여기에서 볼 수 있습니다

http://jsfiddle.net/y8uZe/2

, 텍스트가 포장되어 있기 때문에 scrollWidth 실제로뿐만 아니라 올바른 값을주고있다 :

이 바이올린에서 살펴 보자. 그러나 당신이 그 텍스트를 포장하지 말라고 div에게 말하면 이상한 일이 일어난다.

어쨌든. 일부 브라우저에는 버그가 있습니다. Safari/IE/Chrome 또는 Opera/Firefox 중 하나입니다. 그리고 Opera에는 항상 버그가 있기 때문에, 나는 틀렸다고 내기 할 것입니다. :)

http://www.quirksmode.org/dom/w3c_cssom.html에서 정의를 읽을 때 scrollWidth는 올바른 속성 인 "현재 숨겨져있는 부분을 포함하여 전체 콘텐츠 필드의 너비와 높이"입니다.

마지막 편집 : 내부 div를 display : table로 변경 한 경우. 문제를 해결합니다. CSS에 따라 그렇게 할 수도 그렇지 않을 수도 있지만 적어도 알아두면 좋습니다. 예 : http://jsfiddle.net/y8uZe/3/