柔性箱容器中的省略号

自从最近的(?)每晚发布 Firefox (35.0 a1)我在使用 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 中，稳定性和预期的一样。

105098 次浏览
小开
最佳答案

This was eventually tracked down to recent changes in Firefox Nightly. Long story short, setting min-width: 0 on the .column selector will make it work as expected.

A more comprehensive answer can be found here. Of note:

"Basically: flex items will refuse to shrink below their minimum intrinsic width, unless you explicitly specify "min-width" or "width" or "max-width" on them."

The working solution:

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


提交答案