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

Versión 1
estrellaestrellaestrellaestrellaestrella(3)

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