¿Cómo puedo truncar textos largos en una tabla usando CSS?

Question

¿Alguien puede dar un ejemplo de CSS de cómo puedo crear una tabla donde los textos largos se truncan en textos que terminan en "..."?

Aquí está el ejemplo: http://jsfiddle.net/NpABe/

<table> 
    <tr> 
     <td>aaaa</td> 
     <td>ssssssss</td> 
     <td>dddddddddddd</td> 
    </tr> 
    <tr> 
     <td>ffffffffffffffff</td> 
     <td>gggggggggggggggggggg</td> 
     <td>hhhhhhhhhhhhhhhhhhhhhhhh</td> 
    </tr> 
    <tr> 
     <td>jjjjjjjjjjjjjjjjjjjjjjjjjjjj</td> 
     <td>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td> 
     <td>llllllllllllllllllllllllllllllllllll</td> 
    </tr> 
</table> 

Answer 1

Uso text-overflow: ellipsis. Usted tendrá que fijar la anchura de las células y prevenir el ajuste de línea:

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

EDITAR: en realidad esto no funcionará. Parece que necesita un div contenedor para aplicar los estilos a:

<table> 
    <tr> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div</td> 
(snip) 

Y luego:

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

EDIT 2 Ah hay una manera, pero sólo si se utiliza table-layout: fixed:

table { 
    table-layout: fixed; 
    width: 100px; 
} 

td { 
    white-space: nowrap; 
    overflow: hidden;   /* <- this does seem to be required */ 
    text-overflow: ellipsis; 
} 

Answer 2

Esto debería ser lo que buscas:

http://mattsnider.com/css/css-string-truncation-with-ellipsis/

tener en cuenta que el texto CSS desbordamiento es una declaración CSS3, pero es compatible con Internet Explorer 6+, WebKit 312.3+ (Safari 1.3 +/cromo), y Opera 9+ (versiones < 10,7 necesitará el -o -text-overflow declaration). Sin embargo, no en Firefox < 7.0.

Para solucionar esto, se puede utilizar este plugin de jQuery: http://www.bramstein.com/projects/text-overflow/

Answer 3

Esta es una variación de la respuesta de @RobAgar que funciona bien para mí. Yo defino el siguiente CSS:

td.item-node { 
    max-width: 10em; 
} 
div.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Y el HTML parece que

<td class="item-note"> 
    <div class="ellipsis">Really super duper long item note that will truncate</div> 
</td> 

De esta manera puedo especificar el ancho en el que me importa (la celda de tabla) sin tener que repetir todo el blanco -espacio, desborda propiedades de CSS para cada celda. La clase en el div también deja en claro cuál es su propósito.

Answer 4

Si necesita truncar el texto de una sola línea utilizar este CSS:

.truncate-text-one-line{ 
    width:80%; 
    height: 100px; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 

De lo contrario, utilice este script:

function shorten_text(text, maxLength) { 
    var ret = text; 
    if (ret.length > maxLength) { 
     ret = ret.substr(0,maxLength-3) + "..."; 
    } 
    document.write(ret); 
}