css - grow - Elipsis en contenedor de caja flexible
flexbox generator (1)
Esta pregunta ya tiene una respuesta aquí:
Desde la última versión (?) De Firefox Nightly (35.0a1) he tenido un problema con text-overflow: ellipsis dentro de un contenedor de flexbox con flex-direction: row , con cada columna con un ancho del 50%.
Manifestación:
.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>
En Nightly, el texto se filtrará fuera de su contenedor y no añadirá ... al final. En Chrome y Firefox Stable funciona según lo previsto.
Esto finalmente se rastreó a los cambios recientes en Firefox Nightly. Para abreviar, estableciendo min-width: 0 en el selector .column lo hará funcionar como se esperaba.
Una respuesta más completa se puede encontrar here . De nota:
"Básicamente: los artículos flexibles se rehusarán a contraerse por debajo de su ancho intrínseco mínimo, a menos que especifique explícitamente" min-width "o" width "o" max-width "en ellos."
La solución de trabajo:
.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>