Pregunta ¿Por qué esto se comporta de la manera que lo hace con max-width: 0?


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


32
2017-10-10 05:16


origen


Respuestas:


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-widthy width:100% hacer 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 vio en la demo vinculada, anule ese comando para el div (tal vez por la misma razón por la cual 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 el ancho de la div ya no es lo suficientemente grande como para contener todo el contenido de 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 padre div, aunque no hay etiquetas

Este ancho innato del contenido de texto es la razón por la cual max-width:0 es necesario para crear el efecto. Una vez que el ancho de la div ya no es lo suficientemente grande como para contener todo el contenido, el max-width:0 propiedad 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 del div sí mismo. Por lo tanto, desde el div ahora tiene desbordamiento de texto y text-overflow: ellipsis está configurado, el desbordamiento de texto se elipse (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 da una idea de cómo por qué este es el caso. No cubre cómo  display:table-cell anula parte de la max-widthEfecto de


17
2017-10-10 06:43



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 esta, punto 2 del algoritmo)

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>


3
2017-10-11 05:06



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.

Mucha gente (como yo) llegará a esta pregunta no porque tengan un interés académico en lo que max-width: 0 significa en esta caso, pero porque quieren saber si está bien usar ese truco para obtener los puntos suspensivos para mostrar el 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" sobre el <table> elemento, como se sugiere en esta respuesta.


0
2018-05-02 08:40