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

Imágen de perfil

Recortar un texto y poner puntos suspensivos con CSS3gráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 04 de Abril del 2014 por Xavi
8.875 visualizaciones desde el 04 de Abril del 2014. Una media de 70 por semana
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
estrellaestrellaestrellaestrellaestrella(2)

Publicado el 04 de Abril del 2014gráfica de visualizaciones de la versión: Versión 1
8.876 visualizaciones desde el 04 de Abril del 2014. Una media de 70 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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 (2)

Khristian
06 de Abril del 2014
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
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

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2644