0
Una gran cantidad de texto mostrado realmente puede destruir el diseño de su sitio, sobre todo cuando no hay manera de saber la cantidad de texto que puede contener cada elemento.
Es posible diseñar su sitio para quedar bien con sólo unas pocas líneas de texto, pero mucho más tarde se está mostrando todo el ipsum lorum.
La manera de solucionar este problema es mediante la adición de CSS a un elemento que limitará la visibilidad del texto después de cierto punto. Una forma visualmente atractiva de hacer esto es cortar el texto en un determinado momento y añade una elipsis.
¿Que Es La Elipsis?
Si usted no sabe lo que es la elipsis se puede aprender más sobre él. Básicamente se trata de la ... al final del texto, que permite al lector saber que el texto / pensamiento ha sido de corte. En este post vamos a ver cómo añadir tanto los efectos simples y múltiples línea de puntos suspensivos usando puramente CSS.
Linea Recta De Puntos Suspensivos
El siguiente bloque de código creará el efecto de puntos suspensivos una vez que el elemento llegue a la anchura del elemento padre.
.ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }Linea Multiples De Puntos Suspensivos
Si te fijas, el último efecto es grande para añadir puntos suspensivos a las líneas individuales de texto, pero el texto no se rompa en varias líneas debido a la línea que dice nowrap; . Esto fuerza al texto para mantenerse en la misma línea, independientemente del tiempo que es. Con el fin de solucionar este problema y ser capaz de mostrar varias líneas de texto antes de añadir los puntos suspensivos debemos usar la siguiente clase de lugar.
.block-ellipsis {
display: block;
display: -webkit-box;
max-width: 100%;
height: 43px;
margin: 0 auto;
line-height: 1;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}Para que esto funcione correctamente el código hay que hacer algunos cálculos v La propiedad altura es igual al número de líneas deseadas multiplicado por el tamaño de fuente, más de 1 píxel para dar cuenta de trazos bajos de caracteres.
Por lo tanto, en este ejemplo, el tamaño de fuente se establece en 14px, y yo quería mostrar 3 líneas de texto antes de añadir el elipsis. Así que 3 x 14 + 1 = 43, lo que significa que la altura total será de 43px. Es bastante simple, pero funciona muy bien.
Nota! El efecto de puntos suspensivos requiere webkit, lo que significa que si alguien lo ve utilizando un navegador que no es compatible webkit entonces no van a ver el ... pero el texto todavía será cortada en el punto correcto, por lo que este efecto todavía funciona en todos los principales navegadores.
Sólo una nota rápida, para asegurar que funcionen tienen que estar dentro de un div con un ancho establecido, si el elemento padre no tiene anchura a continuación, el texto se acaba de seguir para siempre y el efecto no va a funcionar. En el ejemplo anterior, la anchura de la matriz se fijó en 300. Así que una vez alcanzado el texto 300px, el efecto puntos suspensivos se hizo cargo. Bastante simple pero muy útil! Si usted tiene algún otro consejo o trucos CSS ser Shure compartirlas en los comentarios o enviarme un correo electrónico!
Comentarios