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

Imágen de perfil
Val: 591
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

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


CSS

Publicado el 4 de Abril del 2014 por Xavi (530 códigos)
21.766 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
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 4 de Abril del 2014gráfica de visualizaciones de la versión: Versión 1
21.767 visualizaciones desde el 4 de Abril del 2014
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 (3)

Khristian
6 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
Imágen de perfil
13 de Agosto del 2017
estrellaestrellaestrellaestrellaestrella
¡Perfecto!. Sencillamente...
Responder

Comentar la versión: Versión 1

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

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2644