¿Cómo coloco un una condición de caracteres con CSS? Más bien para que me muestre cierta cantidad y el resto las oculte. Gracias.
Respuestas
La solución consiste en utilizar la propiedad text-overflow de CSS3. Si tienes por ejemplo el siguiente párrafo de contenidos:
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
Para mostrar solamente la primera línea de contenido y ocultar todo lo demás, tendrías que aplicar los siguientes estilos:
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
Tu navegador mostrará solamente la primera línea y añadirá tres punto suspensivos (...) para indicar que el contenido se ha recortado:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...
Existen otras formas de cortar el contenido que también se basan en la propiedad text-overflow, tal y como puedes ver en este artículo.
@javiereguiluz
muchas gracias me ha servido muchísimo :D
@SAMMYVARGAS6
Hola otra preguntita :D ¿cómo hago para cuando coloque el cursor sobre el texto se muestre el original y cuando lo quite quede corto?
Ya lo he intentado así, pero no me funciona:
a:hover { overflow: visible; }
Mil gracias.
@SAMMYVARGAS6
Estos son los estilos CSS completos que deberías utilizar para ocultar por defecto el texto de los párrafos y para mostrarlo cuando se pasa el ratón por encima:
p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } p:hover { overflow: visible; text-overflow: none; white-space: normal; }
@javiereguiluz