web-dev-qa-db-fra.com

Ellipsis dans le conteneur flexbox

Depuis la dernière (?) Version de Firefox Nightly (35.0a1), je rencontre un problème avec text-overflow: Ellipsis dans un conteneur flexbox avec flex-direction: row, chaque colonne ayant une largeur de 50%.

Démo:

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

Dans Nightly, le texte coulera hors de son conteneur et ne sera pas ajouté au ... à la fin. Dans Chrome et Firefox Stable, il fonctionne comme prévu.

cssfirefox
47
jlowgren

Cela a finalement été retracé aux changements récents dans Firefox Nightly. Longue histoire courte, mise min-width: 0 sur le .column sélecteur le fera fonctionner comme prévu.

Une réponse plus complète peut être trouvée ici . À noter:

"Fondamentalement: les éléments flex refusent de se contracter en dessous de leur largeur intrinsèque minimale, sauf si vous spécifiez explicitement" largeur minimale "," largeur "ou" largeur maximale "."

La solution de travail:

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