¿Desbordamiento de texto CSS en una celda de tabla?

Solución:

Para recortar texto con puntos suspensivos cuando se desborda en una celda de la tabla, deberá establecer el max-width Propiedad CSS en cada td clase para que el desbordamiento funcione. Sin diseño adicional div se requieren elementos:

td
{
 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Para diseños receptivos; utilizar el max-width Propiedad CSS para especificar el ancho mínimo efectivo de la columna, o simplemente usar max-width: 0; para una flexibilidad ilimitada. Además, la tabla contenedora necesitará un ancho específico, normalmente width: 100%;, y las columnas normalmente tendrán su ancho establecido como porcentaje del ancho total

table {width: 100%;}
td
{
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

Histórico: para IE 9 (o menos), debe tener esto en su HTML, para solucionar un problema de representación específico de IE

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->

Especificando un max-width o el ancho fijo no funciona para todas las situaciones, y la tabla debe ser fluida y auto-espaciar sus celdas. Para eso están las mesas. Funciona en IE9 y otros navegadores.

Utilice esto: http://jsfiddle.net/maruxa1j/

table {
    width: 100%;
}
.first {
    width: 50%;
}
.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<table border="1">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ellipsis first"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
        </tr>
    </tbody>
</table>

Por qué pasa esto?

Parece que esta sección en w3.org sugiere que el desbordamiento de texto se aplica solo a elementos de bloque:

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

El MDN dice lo mismo.

Este jsfiddle tiene su código (con algunas modificaciones de depuración), que funciona bien si se aplica a un div en lugar de un td. También tiene la única solución alternativa en la que pude pensar rápidamente, envolviendo el contenido del td en un contenedor div cuadra. Sin embargo, eso me parece un marcado “feo”, así que espero que alguien más tenga una mejor solución. El código para probar esto se ve así:

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}

Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

---

---

Utiliza Nuestro Buscador