Código de CSS - Recortar un texto y poner puntos suspensivos con CSS3

Pos: 4

Val: 560

Ha mantenido su posición en CSS (en relación al último mes)

Recortar un texto y poner puntos suspensivos con CSS3

CSS

(3)

Publicado el 4 de Abril del 2014 por Xavi (548 códigos)

24.182 visualizaciones desde el 4 de Abril del 2014

En este simple código se muestra como recortar un texto de forma automática cuando es mas largo que su contenedor, y añade al final puntos suspensivos indicando que has mas texto que no se ha podido mostrar.

Versión 1
(3)

Publicado el 4 de Abril del 2014

gráfica de visualizaciones de la versión: Versión 1

24.183 visualizaciones desde el 4 de Abril del 2014

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="utf-8">

    <style>

        .contenido {

            width:500px;

            background-color:orange;

            color:white;

            font-size:18pt;

            overflow:hidden; /* Escondemos la parte sobrante */

            white-space:nowrap; /* Indicamos que no realice salto de linea si no cabe en la anchura indicada */

            text-overflow: ellipsis; /* Ponemos los dos puntos */

    </style>

</head>

<body>

<div class="contenido">Este texto es mas largo de la anchura definida, para ver como es cortado por css3</div>

</body>

</html>

Comentarios sobre la versión: Versión 1 (3)

Khristian

6 de Abril del 2014

El problema es que traerás todo el texto siempre.

Trataré de publicar una clase que hice sobre lo mismo, pero además limpio el texto de código html, y también se realiza el corte en un espacio para evitar que la última palabra quede cortada.

Se agradece el aporte.

Responder

María Hernandez

21 de Enero del 2016

Buenas tardes. Por favor quiero saber como hago para ver todo el contenido del texto que esta en esa celda, cuando el usuario le de clic. Utilice las propiedades y me funciono, pero yo lo necesito para que en primera instancia todos los contenidos queden en celdas del mismo tamaño en una sola linea y visualmente se observe estético, pero necesito que el usuario pueda leer todo su contenido cuando le de clic sobre el campo que necesita. Muchas gracias.

Responder