107

Since the latest (?) release of Firefox Nightly (35.0a1) I've been experiencing an issue with text-overflow: ellipsis inside a flexbox container with flex-direction: row, with each column being 50% wide.

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>

In Nightly the text will leak outside its container, and not append the ... at the end. In Chrome and Firefox Stable it works as intended.

jdlm
  • 6,327
  • 5
  • 29
  • 49
  • On webkist it seems fine, but if you need your solution working cross browser, please consider using a JS solutions like http://dotdotdot.frebsite.nl/ – GibboK Oct 20 '14 at 13:52
  • 2
    This question has been marked as duplicate, but duplicate of what? I believe it's [this one](http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text), but I find the current thread simpler to read. – Tibo May 17 '16 at 15:17
  • 1
    Add `overflow: hidden;` on the `.column` selector will make it working fine. – HDP Jan 12 '22 at 07:16

1 Answers1

182

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>
jdlm
  • 6,327
  • 5
  • 29
  • 49