가변 폭 div를 사용할 때 CSS 텍스트 줄임표

Question

부모 div 및 인접 div에서 충분한 공간을 허용하지 않을 때 떠 다니는 div 줄임표에 텍스트가 표시되는지 궁금합니다. 예를 들어 :

<style> 
.parent-div { 
    width: 100%; 
    border: 1px; 
    padding: 4px; 
} 
.text-div { 
    float: right; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;  
} 
.icon-div { 
    float: left; 
} 
</style> 
<div class="parent-div"> 
    <div class="text-div">This is text I'd like to truncate when space doesn't permit</div> 
    <div class="icon-div">X</div> 
</div> 

지금까지 내가 브라우저 창을 위기 경우, 부모 사업부는 텍스트 사업부의 공백이 사라지고, 붕괴하지만, 공간이 더 이상 없을 때, 줄임표에 걷어차하지 않습니다.

내가 생각할 수있는 유일한 일은 창이 크기를 조정하고 텍스트 div에 새로운 고정 너비를 동적으로 설정했을 때 이벤트를 트리거하는 것입니다. 그러나 이것은 패딩과 필연적으로 고려해야 할 인접한 공예품을 고려하면 멋지지 않습니다. 적절한 너비를 얻기 위해 빼십시오.

이것에 대한 의견이 있으십니까?

는 여기 jsFiddle 데모입니다 : http://jsfiddle.net/Blender/kXMz7/

Answer 1

당신은 꽤 직관적으로이 작업을 수행 CSS3의 유연한 상자 레이아웃을 사용할 수 있습니다

:

.parent-div { 
    display: flex; 
} 

.text-div { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;  

    min-width: 0; 
} 

.icon-div { 
    flex: 1; 
}​ 

데모 : http://jsfiddle.net/Blender/kXMz7/1/이

Answer 2

우리 회사는 아직 CSS3를 지원하지 않습니다 하지만 다른 솔루션으로 문제를 해결할 수있었습니다. float 속성을 아이콘 div에만 적용하고 HTML에 첫 번째로 넣으면 나머지 div는 세로 정렬 상태를 유지하면서 충분한 공간이 없을 때 잘립니다.

예 : HTTP : // jsfiddle http://jsfiddle.net/qftWN/ (오른쪽 아이콘), (왼쪽에있는 아이콘) http://jsfiddle.net/Nr2NN/