Dấu ba chấm trong hộp chứa flexbox

Question

Kể từ lần phát hành mới nhất (?) Của Firefox Nightly (35.0a1) Tôi đã gặp sự cố với text-overflow: ellipsis bên trong hộp chứa flexbox với flex-direction: row, với mỗi cột rộng 50%.

Demo:

.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>

Trong hàng đêm văn bản sẽ bị rò rỉ bên ngoài thùng chứa của nó, và không thêm các ... ở cuối. Trong Chrome và Firefox Ổn định, nó hoạt động như dự định.

Answer 1

Điều này cuối cùng đã được theo dõi xuống những thay đổi gần đây trong Firefox Nightly. Dài câu chuyện ngắn, thiết lập min-width: 0 trên bộ chọn .column sẽ làm cho nó hoạt động như mong đợi.

Câu trả lời toàn diện hơn có thể được tìm thấy here. Lưu ý:

"Về cơ bản: các mặt hàng flex sẽ từ chối co lại dưới chiều rộng nội tại tối thiểu của chúng, trừ khi bạn chỉ định rõ ràng" chiều rộng tối thiểu "hoặc" chiều rộng "hoặc" chiều rộng tối đa "trên chúng."

Các giải pháp làm việc:

.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>