Una sinfonía en C#

Un pequeño aporte a la comunidad de habla hispana.

Trucos en CSS: Ellipsis no funciona en las tablas

Hace ya un buen tiempo que contamos con la posibilidad de usar ellipsis, esto es, si un texto es más largo de lo que queremos mostrar simplemente seteamos algunas propiedades css para que llegado un punto se corte y muestre unos puntos al final, algo así:

.text {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Y funciona muy bien

image

Excepto que si lo aplicamos en una tabla….no funciona

image

Soluciones:

Bien, hay más de una solución para este problema (como casi siempre en css), todas con sus pro y sus contras.

Primera:

poner display : block

.text {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
}

 

El único pero es que estamos forzando a la tabla a comportarse como bloque, pero depende de cada caso puede ser aceptable.

Segunda:

Poner un max-width a la celda

.text {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    
    text-overflow: ellipsis;
}

td.text{
    max-width: 200px;
}

 

En este caso es un poco más elegante ya que no forzamos ningún comportamiento de la tabla más que el que queremos: que no exceda cierto ancho.

Tercera:

El tercero sería poner un div dentro de la celda con la clase text

<table>
    <tr>
        <td><div class="text">Este es un texto un poco largo para mi gusto</div></td>
    </tr>
</table>

Y con el primer css funciona, aunque ya estamos modificando el HTML, como siempre será cuestión de gustos / necesidades.

Dejo un link a una larga discusión en Stackoverflow sobre el tema.

Nos leemos.

[VIDEO SERIES] Azure para desarrolladores web

En el último mes he publicado algunos videos sobre los conceptos básicos para crear y publicar sitios web en Azure desde el punto de vista de un desarrollador web (en este caso yo mismo) los mismo están en español publicados en Channel 9, dejo los links:

Lo interesante de los videos es que son cortos y van siguieno el mismo ejemplo paso a paso.

En el futuro planeo seguir agregando más al listados. Nos leemos.