div 요소 내부에 label 요소를 맞추는 방법

Question

div 요소는 창 너비와 그 안에 레이블을 모두 포함합니다. 라벨이 동적으로 변경되고 그 안의 텍스트가 div의 경계를 넘는 경우가 있습니다.

http://jsfiddle.net/VWNKC/ 내가 함께 노력 :이 예는 두 사업부 및 라벨에

white-space: nowrap 

하지만 그냥 작동하지 않았다. 레이블 내부의 텍스트를 축소하여 부모 div의 너비에 맞출 수 있는지 궁금합니다.

div의 파란색 배경 끝 부분을 스크롤 한 다음 항목을 선택하려고하면 라벨이 div를 넘는 것을 볼 수 있습니다. 콘텐츠가 아직 있습니다.

는

편집 : 텍스트를 축소하지만, 그 내용의 일부를 보여 주려하고 있지 않다

는, 텍스트의 beggining 말할 수 있습니다. 글꼴의 크기를 변경하려고하지 않고 div 안에 들어갈 텍스트의 일부만 보여주고 싶습니다.

Answer 1

레이블이 부모 컨테이너 안에 들어가야 할 것 같습니까? 이 경우 white-space : nowrap이 작동하지 않습니다. 그러면 레이블 텍스트가 상위 컨테이너의 경계를 벗어나 다음 줄로 줄 바꿈하지 않게됩니다.

그래서 정상적으로 다음과 같은 CSS 속성을 사용하여 절단 이렇게 어느 레이블이 사업부의 폭 내에서 유지되도록 다음 줄에 텍스트 감싸기를, 또는 그것을 가질 수 두 가지 방법이 있습니다 :

은

text-overflow: ellipsis; 
overflow: hidden;