플렉스 박스 컨테이너의 줄임표

Question

파이어 폭스 나이트 리 (35.0a1)의 최신판 (?)부터 flex-direction: row 인 플렉스 박스 컨테이너 내부에있는 text-overflow: ellipsis과 관련된 문제가 발생했습니다. 각 열은 50 %입니다.

데모 :

.container { 
 
    width: 300px; 
 
    background: red; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.column { 
 
    flex-basis: 50%; 
 
} 
 

 
.column p { 
 
    background: gold; 
 
    
 
    /* Will not work in Firefox Nightly 35.0a1 */ 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="column"> 
 
     <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p> 
 
    </div> 
 
    <div class="column"> 
 
     <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p> 
 
    </div> 
 
    </div> 
 
</div>

야간의 텍스트가 컨테이너 외부 누출과 끝에 ...을 추가하지. Chrome 및 Firefox Stable에서는 의도 한대로 작동합니다.

Answer 1

결국 Firefox Nightly의 최근 변경 사항까지 추적되었습니다. 긴 이야기 짧은, min-width: 0.column 선택기에 설정하면 예상대로 작동하게됩니다.

보다 포괄적 인 대답은 here입니다. 참고로 :

"기본적으로 : 플렉스 항목을 명시 적으로 지정하지 않는 한, 최소 고유 폭 이하로 축소하는 것을 거부한다" ". 그들에"분 너비 "또는"폭 "또는"최대 폭을

작업 솔루션 :

이 좋은 것 같다,하지만 당신은 크로스 브라우저를 작동하는 솔루션을 필요로하는 경우, HTTP와 같은 JS 솔루션을 사용하여 고려하시기 바랍니다 webkist에

.container { 
 
    width: 300px; 
 
    background: red; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.column { 
 
    /* This will make it work in Firefox >= 35.0a1 */ 
 
    min-width: 0; 
 
    flex-basis: 50%; 
 
} 
 

 
.column p { 
 
    background: gold; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="column"> 
 
     <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p> 
 
    </div> 
 
    <div class="column"> 
 
     <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p> 
 
    </div> 
 
    </div> 
 
</div>