컨테이너를 자식 중 하나의 너비에 맞추고 다른 자식은 텍스트 오버플로를 사용하십시오.

Question

HTML 컨테이너를 자식 중 하나의 너비에 맞출 수있는 방법을 찾고 있습니다.

그래, 디자인 상으로는 이미 작동하는 방식입니다.

하지만! 나는 또 다른 아이들이 "텍스트 오버 플로우 : 줄임표"로 붕괴 할 필요가있다. 문제점 : 이러한 속성을 적용하려면이 하위 항목을 컨테이너의 너비를 확대하는 "표시 : 블록"모드로 설정해야합니다.

내가 찾고있는 것을 달성하기위한 비밀의 시간이 있습니까?

여기에 JsFiddle이 없거나 시도하지 않으려는 경우를 대비해서 작성되었습니다.

편집 : 왓슨의 말처럼 그런데,이 중요하다, 나는 더 "수축에 맞는"CSS 규칙이없는, 특히 인터넷 익스플로러 10

Answer 1

을 표적으로하고있다. 따라서 두 가지 선택 사항이 있습니다.

1. 오버플로 요소의 크기를 수동 및 정적으로 설정하십시오. 따라서 width : 100 % 대신 width : 330px를 넣으십시오.

2. javascript를 사용하여 .overflow 요소의 크기를 동적으로 조정하십시오. (나는 하나 이상 있다고 가정합니다.) 가장 큰 내부 부서로 축소하고 싶다고 말했습니까? 축소하려는 여러 div가 있지만 그 중 가장 큰 div로 축소하려고한다고 가정 해 보겠습니다.

   .good-width{ 
       border: solid 2px salmon; 
       width:auto; /* necessary for some browsers' offsetWidth */ 
       display:inline-block; /* gives it the width of the contents */ 
   } 
   

그리고 당신은 페이지의 상단에 같은 자바 스크립트 뭔가를 넣어 : 첫째,이 같은 클래스에 그들 모두를 설정

var goods = document.getElementsByClassName('good-width'); 
//collect the widest one's width 
var maxwidth = 0; 
for(var x = 0; x < goods.length; x++) { 
    if(goods[x].offsetWidth > maxwidth) { 
     maxwidth = goods[x].offsetWidth; 
    } 
} 
//set the width of the overflow divs to match 
var overflows = document.getElementsByClassName('overflow'); 
for(var y = 0; y < overflows.length; y++) { 
    overflows[y].style.width = maxwidth + 'px'; 
} 

내가 오해하는 경우, 당신 ' 특정 오버플로를 특정 좋은 너비와 일치 시키려면 각 요소에 ID를 할당하고 그런 식으로 작업해야합니다.

document.getElementById('overflowID').style.width = document.getElementById('good-widthID').offsetWidth + 'px'; 

If 그것은 내 웹 사이트 였고 실제로 자바 스크립트가없는 사람들에게보기에는 # 1과 # 2를 모두 결합했습니다. 즉, 너무 멀리 떨어져 있지 않은 오버플로에 정적 너비를 설정 한 다음 가능한 경우 자바 스크립트가이를 덮어 쓸 수있게합니다.