Psychotik

solucionando marrones desde 2003

Text-overflow, acortar textos con css

Pertenece a  Tips  el 26 enero
Text-overflow, acortar textos fácilmente

Aunque no es perfecta, la propiedad “text-overflow” nos permite acortar textos, por ejemplo si tenemos un texto grande en una entradilla o un acceso, y queremos que se muestre menos texto y además, puntos suspensivos. Aunque tiene varios valores nos interesa el que realmente acorta, ellipsis que genera los clásicos y el valor “Lo que quieras poner” que nos deja cierta libertad para personalizar ese espacio cuando hace el corte del texto. Un par de ejemplo rápidos sobre su uso:

Código CSS:

.ellipsis{
   float:left;
   width:150px;
   text-overflow:ellipsis;
   /* Para que funcione es necesario que vaya acompañado de “white-space” y “overflow” */
   white-space: nowrap;
   overflow: hidden;
}

Resultado:

Maecenas suscipit sagittis erat, a viverra felis tincidunt quis. Ut ornare ultrices diam eu blandit. Curabitur ornare nulla ipsum, eget dapibus risus pulvinar et.

Código CSS:

/* Si queremos personalizarlo un poco solo tenemos que cambiar “ellipsis” por otro texto entre comillas, esta opción a fecha del post solo funciona correctamente en Firefox */
text-overflow:”[···]”;

Resultado:

Maecenas suscipit sagittis erat, a viverra felis tincidunt quis. Ut ornare ultrices diam eu blandit. Curabitur ornare nulla ipsum, eget dapibus risus pulvinar et.

Volver atrás

2 respuestas a “Text-overflow, acortar textos con css”

  1. Miguel dice:

    Muchas gracias Borja! Es un recurso que a buen seguro usaré con frecuencia. Ademásm ahorra algo de trabajo a los “programmers”! :)

    • Borja dice:

      Como comentaba no es perfecto, pero para según que situaciones si que puede ser interesante, y claro que sí, todo lo que le pueda ahorrar un poco de trabajo a los compañeros siempre es de agradecer :D

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »