html - and - w3schools min width
¿Por qué esto se comporta de la manera que lo hace con max-width: 0? (3)
Ver http://jsfiddle.net/mpx7os95/14/
El comportamiento es el comportamiento deseado, que permite a la columna central en un diseño de 3 columnas ocupar todo el espacio disponible Y aún permitir que el texto dentro de él se desborde en puntos suspensivos cuando se reduce lo suficiente. Esto parece funcionar debido a max-width: 0 , pero ¿por qué produce este efecto?
¿Qué tiene de especial el max-width: 0 en este caso?
.row {
width: 100%;
display: table;
}
.col {
position: relative;
min-height: 1px;
border: 1px #000 solid;
display: table-cell;
}
.x {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width:100%;
max-width: 0;
}
<div class="row">
<div class="col">abc</div>
<div class="col x">test blah blah blah blah blah zzzzz.</div>
<div class="col">def</div>
</div>
Creo que el comentario de BoltClock sobre la respuesta de Zach Saucier, que el comportamiento no está definido, es una buena razón para evitar confiar en el hecho de que los navegadores actuales muestran el comportamiento deseado.
Muchas personas (como yo) llegarán a esta pregunta no porque tengan un interés académico en qué max-width: 0 significa en este caso, sino porque quieren saber si está bien usar ese truco para que se muestren los puntos suspensivos. texto en una celda de tabla, y FWIW creo que la respuesta es: "realmente no".
Una mejor manera de hacer que las elipsis trabajen en ese caso es usar " table-layout: fixed " en el elemento <table> , como se sugiere en esta respuesta .
Esta no es una respuesta completa, sino una contribución.
¿Qué tiene de especial el ancho máximo: 0 en este caso?
No estoy seguro, pero la celda parece dar otra oportunidad para adaptarse. (tal vez this , algoritmo punto 2)
De acuerdo con mis experimentos, solo aplica elementos reemplazados con ancho intrínseco. En este caso, el bloque de texto tiene ancho intrínseco por espacio en blanco: nowrap.
Los elementos sin ancho intrínseco se ajustan bien sin usar ancho máximo: 0.
http://jsfiddle.net/rnrlabs/p3dgs19m/
* {
box-sizing: border-box;
}
.table {
display: table;
width: 300px;
}
.row {
width: 100%;
display: table-row;
}
.col {
border: 1px #000 solid;
display: table-cell;
}
.a {
min-width: 80px;
}
.x {
background: #0cf;
overflow: hidden;
text-overflow: ellipsis;
width:100%;
}
.y {
max-width: 0;
}
.z {
white-space: nowrap;
}
<div class="table">
<div class="row">
<div class="col">abc</div>
<div class="col x">
<img src="http://placehold.it/500x50&text=InlineReplacedIntrinsicWidth" />
</div>
<div class="col">end</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="col">abc</div>
<div class="col x y">
<img src="http://placehold.it/500x50&text=InlineReplacedIntrinsicWidthPlusMaxWidth" />
</div>
<div class="col">end</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="col">abc</div>
<div class="col x z">Intrinsic Width due white-space property set to nowap.</div>
<div class="col">end</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="col">abc</div>
<div class="col x y z">Intrinsic Width due white-space property set to nowap and Max-Width</div>
<div class="col">end</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="col">abc</div>
<div class="col x"><span>IntrinsicWidthduenospacesintextandblahIntrinsicWidthduenospacesintextandblah</div>
<div class="col">end</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="col">abc</div>
<div class="col x y"><span>IntrinsicWidthduenospacesintextandMaxWidth</div>
<div class="col">end</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="col">abc</div>
<div class="col x y">Non Intrinsic Width. Inline, non-replaced elements. <strong> Inline, non-replaced elements. </strong> Inline, non-replaced elements.</div>
<div class="col">end</div>
</div>
</div>
Nota : No es solo max-width:0 , es cualquier ancho menor que el ancho del contenido de texto.
La mezcla de display: table-cell , max-width y width:100% crea una situación interesante que las especificaciones no cubren explícitamente. Sin embargo, al hacer algunas observaciones y pensar, podemos entender por qué tenemos el mismo comportamiento en todos los principales navegadores.
max-width:0 intenta hacer que el ancho del elemento sea 0, por supuesto, lo que significa que todo debe desbordarse. Sin embargo, la combinación de display: table-cell y width:100% , como se ve en http://jsfiddle.net/mpx7os95/14/ , anula ese comando para el div (tal vez por la misma razón por max-width no se aplica a las filas de la tabla ) en su mayor parte . Como tal, el elemento se muestra como lo haría sin el max-width:0 hasta que el ancho del div ya no sea lo suficientemente grande como para contener todo el contenido del texto.
Algo que debemos tener en cuenta antes de continuar es que el texto en sí mismo tiene un ancho establecido por los caracteres dentro de él. Es una especie de elemento secundario del div principal, aunque no hay etiquetas.
Este ancho innato del contenido de texto es la razón por la que max-width:0 es necesario para crear el efecto. Una vez que el ancho del div ya no es lo suficientemente grande como para contener todo el contenido, la propiedad max-width:0 permite que el ancho sea menor que el ancho del contenido de texto, pero obliga al texto que ya no cabe a convertirse en desbordamiento de la div misma. Por lo tanto, dado que el div ahora tiene desbordamiento de texto y desbordamiento de text-overflow: ellipsis se establece una text-overflow: ellipsis , se omite el desbordamiento de texto (si es una palabra).
Esto es muy útil para nosotros, porque de lo contrario no podríamos hacer este efecto sin un montón de JavaScript desordenado. Usar demo de caso
Nota: esta respuesta describe el comportamiento y brinda una idea de por qué este es el caso. No cubre cómo display:table-cell anula parte del efecto de max-width .